框阴影和边框渲染错误 [英] box-shadow and border rendering 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透明边界.

It looks like there is some kind of 1px transparent border between the inset box-shadow and the surrounding border.

看看这个实时示例，我可以在最新版本中重现该渲染怪异Chrome，Firefox和IE. (因此不依赖于引擎)

Have a look at this live example, i could reproduce that rendering weirdness with the last releases of Chrome, Firefox and IE. (thus not rendering engine-dependent)

边界半径较小时不会发生(换句话说，形状不是圆形时不会发生)

And it doesn't happen with a lower border-radius (in other words, it doesn't happen when the shape is not a circle)

我没有找到使这件事消失的方法，但是使用低不透明度会使它几乎不可见.我将使用该技术(并让问题悬而未决)，直到出现 real 解决方案为止.

I didn't find a way to make this thing go away, but using a low opacity makes it almost invisible. I'll be using that technique (and leaving the question open) until a real solution comes up.

推荐答案

绝对看起来像盒子阴影中的错误(使用散布arg时).要解决此问题，请使用覆盖div.这是代码:

Definitely looks like a bug in box-shadow (when using the spread arg). As a work-around just use an overlay div. Here's the code:

html:

<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/

在这里还调整了模糊度和散度(以显示出相同的结果，减去不需要的部分)，这是一种小提琴:

Here's a fiddle with the blur and spread adjusted as well (to show that identical results, minus the unwanted parts, can be achieved): http://jsfiddle.net/wgpzL/

这篇关于框阴影和边框渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！