Question

当我尝试将一个框阴影应用于具有3px边框半径的元素时，我得到了带有元素背景像素的丑角。

HTML

<div id="wrapper">


</div>

CSS

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

的jsfiddle http://jsfiddle.net/PCzFC/1/

如果你看小提琴，你会看到黑色背景在角落里。它应该是这样还是一个bug？我使用Firefox。

Answer 1

这是Google Chrome中的一个已知错误，也许它也出现在Firefox中。 http://code.google.com/p/chromium/issues/detail?id=29427

Answer 2

您可以在没有插入的情况下创建相同的效果。在它周围做一个黄色包装。

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 290px;
    height: 290px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px 1px black;
    -webkit-box-shadow: 0 0 5px 1px black;
    box-shadow: 0 0 5px 1px black;
    margin: 5px;
}
.yellow {
    background: yellow;
    border-radius: 6px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    margin: 40px auto;
}

<div class="yellow">
<div id="wrapper">

</div>
</div>

http://jsfiddle.net/PCzFC/65/

Answer 3

阴影：插图的作用是在框内添加阴影。如果删除所有框阴影的插入，阴影将移动到框的外部。

Answer 4

这不是一个会发生错误的错误，因为你使用了插入阴影效果，如果你能理解css，那么插入意义就在里面，所以如果你从你的代码中删除插入是正常的那么它应该看起来很好或者你需要阴影效果在盒子里面你必须选择颜色并将其与盒子颜色相匹配或者您可以从代码中删除边框半径，然后它应该看起来很好

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

CSS - 角落半径与盒子阴影插入，丑陋的角落

4 个答案: