边界半径问题CSS

对边界半径有一点问题。我已经成功地将我的矩形四舍五入，但是我将四舍五入的问题放在了上面。您会在圆角矩形的顶部和底部角落看到悬停本身未被圆角化，实际上是一个矩形。我试过四舍五入，但它也围绕着中心。我知道这可能没有任何意义，但你可以通过看这里了解：http://jsfiddle.net/hCg3J/边界半径问题CSS

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

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 
}

来源

2012-04-22 Ben Green

似乎工作在FF12的罚款。 – Sirko 2012-04-22 14:41:26

尝试使用Safari，如果可以的话，那就是浏览器我遇到问题编辑：也不能在铬 – 2012-04-22 14:42:09

请收拾小提琴。有太多不相关的代码。 – 2012-04-22 14:44:38

在.list:hover, name:hover只需加适量-webkit-border-radius并调整您的需求。

这是jsfiddle proof of concept。你需要做的是仅为顶部元素和左下角的左上角和右上角，底部元素的右下角。我会建议为这些元素添加一个特殊的类。

UPDATE：

其实我在评论建议我加入了第一个孩子和最后子选择，updated fiddle

.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-22 14:46:30 mkk

我原来是这么做的，但是你可以看到它也是在中间的角落圆角的，所以例如第一个选择，左下角和右下角都是圆角。 – 2012-04-22 14:50:41

看到我更新的答案。我建议的解决方案是使用特殊的上/下元素类或使用“第一个孩子”和“最后一个孩子”选择器。 – mkk 2012-04-22 14:51:39

好的，我会尝试，谢谢！ – 2012-04-22 14:53:59

边界半径问题CSS

回答

相关问题