CSS - 带有盒子阴影插图的角半径，丑陋的角落答案

【问题标题】：CSS - Corner Radius with Box Shadow Inset, ugly cornersCSS - 带有盒子阴影插图的角半径，丑陋的角落
【发布时间】：2012-11-14 21:09:35
【问题描述】：

当我尝试将框阴影应用到边框半径为 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/

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

2009 年的一个错误。呸呸！！谢谢你的信息
似乎是 Firefox 中的抗锯齿问题，在 CSS 中找不到真正的解决方法。
有人知道 Mozilla 的错误网址吗？

【解决方案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/

【讨论】：

【解决方案3】：

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

【讨论】：

什么？我想要嵌入效果，但不想要丑陋的角落..？

【解决方案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 你是专家