css 框阴影和边框渲染错误

xbp102n0 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(189)

引起“bug”的Css：

div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}

它看起来像有某种1px的透明边框之间的插入框阴影和周围的边界。

看看this live example，我可以用Chrome、Firefox和IE的最新版本再现这种渲染的怪异。（因此不呈现引擎依赖性）
并且它不会发生在较低的边界半径（换句话说，当形状不是圆形时，它不会发生）

编辑：

我没有找到一种方法，使这件事了，但使用低透明度使它几乎看不见。我将使用这种技术（并保留这个问题），直到一个真实的的解决方案出现。

css

来源：https://stackoverflow.com/questions/8948939/box-shadow-and-border-rendering-bug

2条答案

按热度按时间

xxls0lw81#

绝对看起来像是box-shadow中的一个bug（当使用spread arg时）。作为一种变通方法，只需使用一个覆盖div。代码如下：
联系我们

<div></div>
<div class="overlay"></div>

css：

div {
    margin:10px;
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}
div.overlay {
    margin-top:-310px;
}

小提琴来了http://jsfiddle.net/eX3cy/1/

编辑：

下面是一个调整模糊和扩散的小提琴（以显示相同的结果，减去不需要的部分，可以实现）：http://jsfiddle.net/wgpzL/

赞(0）回复(0）举报 2023-05-23

8ehkhllq2#

太晚了，但是如果其中一个父元素有transform：translate属性，则会发生此错误。这很奇怪，但这是真的...

赞(0）回复(0）举报 2023-05-23