不跟随曲线的框形阴影-Insetbox-shadownotfollowingthecurve

作者：耗子很傻爱钻洞 | 来源：互联网 | 2023-05-17 23:17

ISSUEFIDDLE1小提琴问题1Thisisthefiddleinquestion:Fiddle1这就是问题中的古提琴:古提琴1#one{

ISSUE FIDDLE 1

小提琴问题1

This is the fiddle in question : Fiddle 1

这就是问题中的古提琴:古提琴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;
}

In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equal width, producing a quadrant.

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

Now I added 3 inset box-shadows to the main element with x,y offsets. I expect the box-shadows to follow the curve, and be parallel to each other, like this :

现在我在主元素中添加了3个嵌套框形阴影x,y偏移量。我希望盒子的阴影跟随曲线，并相互平行，像这样:

enter image description here

This is the output instead :

这是输出:

enter image description here

ISSUE FIDDLE 2

问题小提琴2

This is another example of box-shadow not following the curve. This one's without x-y offsets. Fiddle 2

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

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

In this case, pink area should be a quadrant, but looks like a triangle.

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

enter image description here

Why is inset box-shadow losing the curve as the spread radius increases? is it a bug? It seems not to be one as all major browsers give the same output.

为什么嵌套盒形阴影随着扩展半径的增加而失去曲线?这是一个错误吗?似乎不是所有主流浏览器都提供相同的输出。

1 个解决方案

#1

This is not a bug but a correct implementation of box-shadow. Because the outside border-radius is a curve with a 200px height (100% of the box height) and it is the outer-most object being used for the tracing of the first inset box-shadow, the first curve is as you'd expect. The 2nd, however, has to draw a line that is on the outside of a circle with a 200px radius. However, since the 2nd box-shadow is inset further, less of the circumference of that circle will be shown, making it appear to be closer to a straight line. The further each box-shadow is inset, the closer to a straight line it appears because you're seeing less and less of the edge of the next 200px-radius circle.

这不是bug，而是box-shadow的正确实现。由于外部边界半径是一个高度为200px(100%为盒子高度)的曲线，并且它是用于跟踪第一个内嵌盒阴影的最外层对象，所以第一个曲线正如您所期望的那样。第二种方法是画一条半径为200px的圆外的线。然而，由于第二个盒形阴影被进一步嵌入，这个圆的周长将被显示的更少，使它看起来更接近一条直线。每一个框形阴影被嵌入得越远，它就越接近一条直线，因为你看到的下一个200px半径的圆的边缘越来越小。

If you uncomment the #wrapper CSS in this fiddle: http://jsfiddle.net/31xLprkv/1/, you will see the same effect. Because SO requires code with a Fiddle URL, here's the code from it:

如果在这个fiddle: http://jsfiddle.net/31xLprkv/1/中取消注释#包装器CSS，您将看到相同的效果。因为需要使用一个小提琴URL的代码，下面是它的代码:

HTML

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

Because border-radius only causes a single curve that is a set radius and because box-shadow will only ever reproduce an exact copy of the rendered border-radius behind the existing element, you will not be able to implement your desired effect with just box-shadow.

由于边界半径只会产生一个给定半径的曲线，而且由于盒形阴影只会在现有的元素后面复制渲染的边界半径的精确副本，因此您将无法仅使用盒形阴影来实现所需的效果。