插入框阴影不跟随曲线

Question

问题小提琴 1

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

#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;
}

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

在这个特定的示例中，我使用了 100% 的左上角边框半径，所有其他边框半径为 0%，并且高度等于宽度，产生一个象限。

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

这是输出：

---

问题小提琴 2

这是另一个不跟随曲线的 box-shadow 示例。这个没有 x-y 偏移。 Fiddle 2

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

<div></div>

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

为什么 inset box-shadow 随着传播半径的增加而失去曲线？这是一个错误吗？它似乎不是一个，因为所有主要浏览器都提供相同的输出。

Answer 1

这不是错误，而是 box-shadow 的正确实现。因为外部边界半径是一条高度为 200px（框高的 100%）的曲线，并且它是用于跟踪第一个插入框阴影的最外面的对象，所以第一条曲线就像你想要的那样预计。但是，第二个必须在半径为 200px 的圆的外侧绘制一条线。然而，由于第 2 个 box-shadow 被进一步插入，该圆的圆周将显示较少，使其看起来更接近一条直线。每个 box-shadow 插入得越远，它看起来就越接近直线，因为您看到的下一个 200px 半径圆的边缘越来越少。

如果您取消注释此小提琴中的#wrapper CSS：http://jsfiddle.net/31xLprkv/1/，您将看到相同的效果。因为 SO 需要带有 Fiddle 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 的精确副本，所以您将无法实现您想要的效果只有 box-shadow。