html – 不跟随曲线的插入框阴影

概述问题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 1 问题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％,高度等于宽度,产生一个象限.

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

这是输出：

问题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>

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

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

解决方法 这不是BUG,而是Box-shadow的正确实现.因为外边界半径是一个高度为200px(框高度的100％)的曲线,并且它是用于跟踪第一个插入框阴影的最外面的对象,所以第一条曲线就像你一样期望.但是,第二个必须绘制一条半径为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的精确副本,所以只能使用Box来实现所需的效果-阴影.

总结

以上是内存溢出为你收集整理的html – 不跟随曲线的插入框阴影全部内容，希望文章能够帮你解决html – 不跟随曲线的插入框阴影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。