一、简介

box-shadow 属性用于在元素的框架上添加阴影效果。我们可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。

二、属性

属性可设置的值有六个

  • inset 关键字
  • 阴影的X轴偏移量（offset-x）
  • 阴影的Y轴偏移量（offset-y）
  • 模糊半径（blur-radius）
  • 扩散半径（spread-radius）
  • 颜色值

offset-x、offset-y、blur-radius、spread-radius 的都是 length 值类型，后两个值是可选的

  1. /*有两个 length 时，值一次为 offset-x、offset-y*/
  2. .test{
  3.     box-shadow: 2px 2px black;
  4. }
  6. /*有三个 length 时，值依次为 offset-x、offset-y、blur-radius*/
  7. .test2{
  8.   box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  9. }
  11. /*有四个 length 时，值依次为 offset-x、offset-y、blur-radius、spread-radius*/
  12. .test3{
  13.   box-shadow: 0 0 0 2px black;
  14. }
  16. /*阴影可合成，与 background-image有多张图片时有异曲同工之妙*/
  17. .test4{
  18.     box-shadow: 0 0 0 10px red,
  19.                   0 0 0 20px green,
  20.                   inset 0 0 0 10px blue,
  21.                   inset 0 0 0 20px orange;
  22. }

二、参考链接

MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow