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中的“向外”边界半径？

回答

相关问题