如何理解MDN上描述的关于盒子阴影的插值?

时间:2016-12-30 15:00:53

标签: css box-shadow

新年快乐!

当我阅读CSS属性box-shadow的描述时,我无法弄清楚this page上的插值部分是什么意思。 我用谷歌搜索但仍然困惑。 是关于CSS动画吗? 能否请你帮忙?感谢。

如果可能,请提供一些代码示例。

1 个答案:

答案 0 :(得分:1)

让我扼杀消化这块无意义的

  

列表中的每个阴影(将none视为0长度列表)是   通过颜色(作为颜色)分量和x,y,模糊和   (适当时)传播(作为长度)成分。

列表中的每个阴影都使用颜色,x,y,模糊和展开值进行插值(各种含义,但通常是:混合,混合)。

  

对于每个阴影,如果两个输入阴影都插入或未插入,则表示   插值阴影必须与此方面的输入阴影相匹配。如果   任何一对输入阴影都有一个插入而另一对没有插入,   整个影子列表是不可插入的。

我们只能插入(混合,混合任何)相同类型的阴影,无论是否插入,我们都不能将插入阴影与非插入阴影混合

  

如果阴影列表的长度不同,则表示较短的列表   最后填充阴影,颜色是透明的,全部   长度为0,其插入(或不匹配)与较长的列表匹配。

我不确定你最终会得到各种长度的列表,但是从我能得到的内容来看,如果我们以某种方式得到不同长度的列表,浏览器将通过添加来补偿透明阴影,以便用

插入(混合,混合等)

TL; DR

它只是解释了浏览器插入多个阴影的步骤,与我能看到的动画无关。 不用担心,让浏览器做到这一点!