插入框阴影不跟随曲线

Question

ISSUE FIDDLE 1

这是有问题的小提琴： Fiddle 1

＆＃13;

＆＃13;

#one {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green;
}

＆＃13;

<div id="one"></div>

＆＃13;

＆＃13;

＆＃13;

在这个特定的例子中，我使用了100％的左上边界半径，所有其他边界半径都是0％，高度等于宽度，产生一个象限。

现在我使用x，y偏移向主元素添加了3个插入框阴影。我希望盒子阴影跟随曲线，并且彼此平行，如下所示：

这是输出：

---

ISSUE FIDDLE 2

这是不遵循曲线的盒子阴影的另一个例子。这个没有x-y偏移。 Fiddle 2

＆＃13;

＆＃13;

div {
    height: 200px;
    width: 200px;
    border-radius: 100% 0 0 0;
    background-color: plum;
    box-shadow: inset 0px 0px 0 70px green;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，粉色区域应该是一个象限，但看起来像一个三角形。

为什么插入框阴影会随着扩散半径的增加而失去曲线？这是一个错误吗？它似乎不是一个，因为所有主流浏览器都提供相同的输出。

Answer 1

这不是一个bug，而是box-shadow的正确实现。因为外边界半径是一个高度为200px（框高度的100％）的曲线，并且它是用于跟踪第一个插入框阴影的最外面的对象，所以第一条曲线就像你一样＃39 ;期待。但是，第二个必须绘制一条半径为200px的圆外侧的线。但是，由于第二个盒子阴影进一步插入，所以将显示该圆周的较小周长，使其看起来更接近直线。每个盒子阴影插入得越远，越接近它出现的直线，因为你看到下一个200px半径圆的边缘越来越少。

如果您取消注释这个小提琴中的#wrapper CSS：http://jsfiddle.net/31xLprkv/1/，您将看到相同的效果。因为SO需要带有小提琴URL的代码，所以这里有代码：

HTML

<div id="wrapper">
    <div id="one"></div>
</div>

CSS

/*#wrapper {
    height: 200px;
    width: 200px;
    overflow: hidden;
}*/

#one {
    height: 200px;
    width: 200px;
    margin: 120px;
    border-radius: 200px 0 0 0;
    background-color: plum;
    box-shadow: -40px -40px red, -80px -80px blue, -120px -120px green;
    float: left;
}

因为border-radius只会产生一条设定半径的曲线，而且box-shadow只会复制现有元素后面渲染的border-radius的精确副本，所以你将无法实现所需的效果只有盒子阴影。