css - “inset” 之后的参数在这个 CSS box-shadow 语法中是什么意思？

Question

我遇到了一个使用以下语法编写的 box-shadow 属性:

box-shadow: 0 1px 1px rgba(0,0,0,0.24),inset 0 -22px rgba(23,49,76,0.03);

我关注了 w3s box-shadow 的文档，直到 inset 参数之后才明白它的意思。 inset 之后的附加参数在那里没有阐明。

那么，这些附加值的含义是什么？

0 -22px rgba(23,49,76,0.03)

Answer 1

你描述的参数其实是另一个box-shadow的偏移量和颜色。值中的逗号 (,) 表示正在定义两个框阴影。

一些不同的缩进可能会使其更清晰:

box-shadow: 0 1px 1px rgba(0,0,0,0.24),/* <-- Note the comma here, separating the two box shadows */
            inset 0 -22px rgba(23,49,76,0.03);

The W3C’s box-shadow documentation ( which is more reliable than w3schools.com — w3schools is not linked with the W3C, despite their name ) 提到了这一点:

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property takes a comma-separated list of shadows