2

当我尝试将框阴影应用于具有 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/

如果你看小提琴，你会发现黑色背景在角落里。它应该是这样的还是一个错误？我使用火狐。

4

4 回答 4

4

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

于 2012-11-27T10:07:22.930 回答
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/

于 2012-11-30T00:56:27.433 回答
0

shadow: inset 的作用是在框内添加阴影。如果删除所有盒子阴影上的插图，阴影将移动到盒子的外部。

于 2012-11-27T09:33:36.503 回答
-3

这不是一个错误，因为您使用了插入阴影效果，如果您能理解 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;
}
于 2012-11-27T09:43:17.673 回答