这在 Firefox 中似乎不是问题。但在 Safari 中很明显
我有一个带有圆 Angular 、插入边框和指定宽度的 div。你可以在http://jsfiddle.net/jsoningram/fek5n/看到它
您会注意到 div 在左侧的中途中断。好吧,实际上它并没有破裂,但似乎破裂了。如果我将 .beveled 类中的边框颜色更改为黑色,则它是可见的。我还可以删除边框样式并返回“丢失的链接”。
html:
<div id="sub_nav" class="rounded_10 beveled">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
#sub_nav {
position: relative;
background: #e6e6e6;
width: 164px;
min-height: 300px;
float: left;
padding: 0px 0px 27px 0px;
z-index: 5;
margin: 10px 0 0 10px;
}
#sub_nav li {
position: relative;
height: 50px;
width: 160px;
background: #ccc;
margin: 0px 0px 1px 1px;
}
#sub_nav li:first-child {
margin-top: 27px;
}
.rounded_10 {
-webkit-broder-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior:url(_/inc/PIE.htc);
}
.beveled {
border: 1px solid #fbfbfb;
border-style: inset;
}
提前致谢...
最佳答案
这与 border-style:inset 的工作原理有关,以及您的边框和背景颜色彼此如此接近这一事实。
Inset 是一个3d 样式的效果,但是有1px 的边框,很难弄清楚如何绘制效果。如果你改变
.beveled {border: 30px solid red; border-style:inset;}
您会看到它试图完成什么。它采用基色,然后将其变暗/变亮以产生效果。您的浅灰色部分正在逐渐变白。
因此,删除 border-style:inset,然后更改边框颜色,您就可以开始工作了。
.beveled {border: 1px solid #ccc;}
关于css - 展开时带有圆 Angular 和插入边框的 Div 会中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11064334/