css - 展开时带有圆 Angular 和插入边框的 Div 会中断

Question

这在 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;
}

提前致谢...

Answer 1

这与 border-style:inset 的工作原理有关，以及您的边框和背景颜色彼此如此接近这一事实。

Inset 是一个3d 样式的效果，但是有1px 的边框，很难弄清楚如何绘制效果。如果你改变

.beveled {border: 30px solid red; border-style:inset;}

您会看到它试图完成什么。它采用基色，然后将其变暗/变亮以产生效果。您的浅灰色部分正在逐渐变白。

因此，删除 border-style:inset，然后更改边框颜色，您就可以开始工作了。

.beveled {border: 1px solid #ccc;}