0

以下のコードでは、境界線半径スタイルが機能していません

HTML

<ul id="menu" class="menu">
    <li class="active"><a href="#description">Limerick One</a></li>
    <li><a href="#usage">Limerick Two</a></li>
    <li><a href="#download">Limerick Three</a></li>
</ul>​

CSS：

.menu { padding: 0; clear: both; border-radius:10px; }
.menu li { display: inline; }

.menu li a {
    padding: 6px; float:left;font-family:Gill, Helvetica, sans-serif;  border-right: 1px solid #000; border-bottom: none;
    text-decoration: none; color: #fff; font-weight: bold;
    background-image: linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
    background-image: -o-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(34,34,34) 54%, rgb(68,68,68) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(68,68,68)),
        color-stop(0.54, rgb(34,34,34)),
        color-stop(1, rgb(68,68,68))
    );
}

.menu li.active a  { 
    background-image: linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
    background-image: -o-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(138,25,25) 0%, rgb(186,52,52) 54%, rgb(138,25,25) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(138,25,25)),
        color-stop(0.54, rgb(186,52,52)),
        color-stop(1, rgb(138,25,25))
    );
}

.content {
    float: left; clear: both;
    background: #fff; padding: 10px 20px 20px; width: 400px;
}

これがフィドルです：http：//jsfiddle.net/avkKL/

4

3 に答える 3

0 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

webkitとmozのプレフィックスを追加します。Chrome / Firefox/Safariのすべてのバージョンがプレフィックスなしのプロパティを尊重するわけではありません。

于 2012-07-22T16:40:21.500 に答える
0

.menuに境界線が設定されておらず、コンテンツのために高さがありません。半径は境界線の半径を設定しますが、それが機能するには境界線が存在する必要があります。

たとえば、border:1px solid; height:24px.menuに追加します。

于 2012-07-22T16:41:14.667 に答える
0

のある要素の子は、border-radius常に親からブリードアウトします。

border-radius丸めたい要素に直接設定する必要があります。

.menu li:first-child a { border-radius: 10px 0 0 10px }
.menu li:last-child a  { border-radius: 0 10px 10px 0 }

これがフィドルです：http：//jsfiddle.net/avkKL/1/

于 2012-07-22T16:44:26.533 に答える