为卡片式元素增加阴影

理解

使用box-shadow属性可以为元素增加一个或多个阴影。

box-shadow属性有6个值：

• inset: 可选项，默认是外阴影，加上inset，就是内阴影。

• offset-x, 必选项，X轴偏移量，元素的水平阴影有多远，正值则阴影在右边，负值则阴影在左。

• offset-y, 必选项，Y轴偏移量，元素的垂直阴影有多远，正值则阴影在底部，负值则阴影在顶部。

• blur-radius, 可选项，阴影模糊半径。值只能为正，为0则没有模糊效果，值越大阴影边缘越模糊。

• spread-radius, 可选项，阴影扩展半径,为正值则阴影延展扩大，为负值则阴影缩小。

• 阴影颜色：可选，但不设定颜色则为默认色。

其中blur-radius和spread-radius是可选项。

下面是个例子，利用CSS的blur创造多个阴影,几乎透明的黑色。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

上面的例子是建立了两个阴影0 10px 20px rgba(0,0,0,0.19)和 0 6px 6px rgba(0,0,0,0.23)，前者在上，后者在下，如果还想再增加阴影，就添加逗号，在放阴影。

0 10px 20px rgba(0,0,0,0.19)中，0是offset-x，10px是offset-y，20px是blur-radius，rgba(0,0,0,0.19)是阴影颜色。

来源

Applied Visual Design: Add a box-shadow to a Card-like Element | Learn freeCodeCamp

Box-Shadow常被遗忘的一个参数——“Spread” - 精彩人生 - CSDN博客

CSS3 box-shadow_box-shadow, css3属性详解 教程_w3cplus

CHANGELOG