邊界半徑問題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

回答

相關問題