问题 FIDDLE 1
这是有问题的 fiddle : 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 偏移量的内嵌框阴影。我希望盒子阴影跟随曲线,并且彼此平行,就像这样:
这是输出:
问题 FIDDLE 2
这是另一个盒子阴影不跟随曲线的例子。这个没有 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>
在这种情况下,粉色区域应该是一个象限,但看起来像一个三 Angular 形。
为什么 inset box-shadow 会随着扩散半径的增加失去曲线?这是一个错误吗?它似乎不是一个,因为所有主要浏览器都提供相同的输出。
最佳答案
这不是错误,而是 box-shadow 的正确实现。因为外部边界半径是一条高度为 200px(框高度的 100%)的曲线,并且它是用于跟踪第一个插入框阴影的最外层对象,所以第一条曲线与您想要的一样预计。然而,第二个必须在半径为 200px 的圆的外部绘制一条线。然而,由于第二个盒子阴影被进一步插入,圆的圆周将被显示得更少,使其看起来更接近于一条直线。每个框阴影插入得越远,它看起来就越接近直线,因为您看到的下一个 200 像素半径圆的边缘越来越少。
如果您取消注释此 fiddle 中的 #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 的精确副本,你将无法实现你想要的效果只有盒子阴影。
关于html - 不遵循曲线的插图框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29234703/