CSS阴影

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情

1 box-shoadow 盒子阴影

box-shadow属性可以设置一个或者多个阴影

• 多个阴影之间用逗号 , 隔开，前面的阴影在上，后面的在下

  box-shadow: 10px 10px 5px 5px red, 20px 20px 5px 5px blue;
  /*此时 red 的阴影在上，blue在下*/
  

此时为外阴影：

• box-shadow：水平偏移(px) 垂直偏移(px) 模糊度(px) 阴影扩展(px) 阴影颜色(color);

此时为内阴影（基本不会用）：

• box-shadow：水平偏移(px) 垂直偏移(px) 模糊度(px) 阴影扩展(px) 阴影颜色(color) inset;

注意点：

• 快速添加阴影只需要三个参数就行：box-shadow：水平偏移(px) 垂直偏移(px) 模糊度(px);
• 阴影颜色默认为盒子内容的颜色
• 当水平偏移和垂直偏移为0时，就是周围一圈都有阴影

我们可以通过一个网站测试盒子/文字的阴影:

• html-css-js.com/css/generat…

2 text-shadow

text-shadow：水平偏移(px) 垂直偏移(px) 模糊度(px) 阴影颜色(color);

注意点：

• 快速添加阴影只需要三个参数就行：box-shadow：水平偏移(px) 垂直偏移(px) 模糊度(px);
• 阴影颜色默认为文字内容的颜色
• 水平偏移和垂直偏移一般不为0