css中的「向外」邊界半徑？

enter image description here

不過，我想「圓圓」按鈕的底部邊緣，使其看起來像他們出來的頁面並放入頂部的功能區。

我知道，你可以破解它，並添加一個「隔板」的div每個條目之間的圓角，但是這將是很難做到的，在使用的邊界看到的是來自同一div不是全部。另外，因爲我的按鈕非常接近，所以不容易看到。

的「按鈕」的CSS：

.button { 
    border-top: 3px solid #A1C1BE; 
    border-left: 3px solid #A1C1BE; 
    border-right: 3px solid #A1C1BE; 
    border-bottom: 0px; 
    padding: 5px 8px 5px 8px; 
    margin: 0 0 -9px 0; 
    border-radius: 5px 5px 0 0; 
    font-size: 12px; 
    font-family: 'PT Sans', sans-serif; 
    background-color: #f8f8ff; 
    color: #484848; 
}

CSS的「絲帶」：

#top-wrapper { 
    border-bottom: 5px solid #A1C1BE; 
    width: 100%; 
    background-color: #59554E; 
    padding: 10px 0 0 0; 
    color: #C0C0A8; 
}

正如你所看到的，較厚的邊框屬於哪個綿延的長帶狀網頁，而較薄的藍色邊框是按鈕的一部分。前和：後僞類

來源

2011-11-15 n0pe

的解決方案是可能使用更涼爽被創建。你能連接你的菜單的JSfiddle來玩嗎？乾杯。 – doctororange

感謝您的幫助@doctororange，這裏的的jsfiddle http://jsfiddle.net/395Ue/ – n0pe

我想你應該閱讀：http://stackoverflow.com/questions/4839613/how-to-make-round-corners -to-兩者均由內的一箱，和它的邊界 – JohnB

你所需的效果可以通過應用box-shadow爲每個按鈕和3D效果可以由通過施加三維變換和perspective屬性

來源

2013-06-23 18:34:08 eldos

css中的「向外」邊界半徑？

回答

相關問題