DevShelf

Appearance

box-shadow ​

描述 ​

该 box-shadow 属性向元素添加阴影。允许使用多个阴影，指示它们的参数用逗号分隔，应用阴影时，列表中的第一个阴影会更高，最后一个阴影会更低。如果通过 border-radius 属性为元素设置了圆角半径，则阴影也将出现圆角。添加阴影会增加元素的宽度，因此浏览器中可能会出现水平滚动条。

提示

在线 CSS Box Shadow 生成以查看正在使用 box-shadow 的属性。

效果展示 ​

语法 ​

css
box-shadow: none | inset? && <length>{2,4} && <color>?

值 ​

  • 1st <length> 指定阴影的水平偏移量。正值绘制一个阴影，该阴影偏移框的右侧，负长度向左偏移。
  • 2nd <length> 指定阴影的垂直偏移量。正值将阴影向下偏移，负值向上偏移。
  • 3rd <length> 指定模糊半径。不允许使用负值。如果模糊值为零，则阴影的边缘很清晰。否则，该值越大，阴影的边缘越模糊。
  • 4th <length> 指定传播距离。正值会导致阴影按指定半径向所有方向扩展。负值会导致阴影收缩。
  • <color> 指定阴影的颜色。如果颜色不存在，则使用的颜色取自“color”属性。
  • inset 如果存在，“inset”关键字会将投影从外部框阴影（将框阴影到画布上，就像将其抬到画布上方一样）更改为内部框阴影（将画布阴影到框上，就好像框是从画布上切出并移动到它后面一样）。