0

边界半径有点问题。我已经成功地将我的矩形四舍五入，但是我在将悬停在其上的悬停四舍五入时遇到了问题。您将在圆角矩形的顶角和底角看到悬停本身不是圆角的，实际上是一个矩形。我试过把它弄圆，但它也把中心弄圆了。我知道这可能没有意义，但你会通过看这里来理解：http: //jsfiddle.net/hCg3J/

我想做的就是让每个选择突出整个区域，而不是突出。

HTML：

<ul class="pageitem">
    <li class="list" style="border-top:none;"><a href="iphone4.html";><span class="name">iPhone 4/4S</span><div class="arrow"></div></a></li>
    <li class="list"><a href="iphone3.html";><span class="name">iPhone 3G/3GS</span><div class="arrow"></div></a></li>
    <li class="list"><a href="ipod.html";><span class="name">iPod Touch</span><div class="arrow"></div></a></li>
</ul>

CSS

.pageitem {
    -webkit-border-radius: 8px;
    behavior: url(/border-radius.htc);
    border-radius: 8px;
    position:relative;
    zoom: 1;
    -moz-border-radius: 8em;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: #878787 solid 1px;
    font-size: 12pt;
    overflow: hidden;
    padding: 0;
    height: auto;
    width: auto;
    margin: 3px 9px 17px;
    list-style: none
}
4

1 回答 1

6

只需添加适当-webkit-border-radius的.list:hover, name:hover内容并根据您的需要进行调整。

这是一个jsfiddle 概念证明。您需要做的是仅对顶部元素的左上角和右上角以及底部元素的左下角和右下角进行舍入。我建议为这些元素添加一个特殊的类。

更新：

实际上，正如我在评论中建议的那样，我添加了第一个孩子和最后一个孩子选择器，更新了小提琴

.list:hover:first-child, name:hover:first-child {
     -webkit-border-radius: 8px 8px 0px 0px;
}

.list:hover:last-child, name:hover:last-child {
     -webkit-border-radius: 0px 0px 8px 8px;
}
于 2012-04-22T14:46:30.180 回答