box-shadow 是一个 CSS 属性,用于在元素框的周围创建一个或多个阴影。通过这个属性,你可以为元素添加立体感,使其在页面上脱颖而出。

box-shadow 的语法如下:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

  •  horizontal offset: 阴影水平偏移量。可以是正值(阴影向右偏移)或负值(阴影向左偏移)。

  •  vertical offset: 阴影垂直偏移量。可以是正值(阴影向下偏移)或负值(阴影向上偏移)。

  •  blur radius: 模糊半径。可以是零(无模糊)或正值(模糊半径越大,阴影越模糊)。

  •  spread radius: 阴影的尺寸。可以是正值(阴影扩展)或负值(阴影收缩)。

  •  color: 阴影的颜色。可以是具体的颜色值,也可以是关键字(如 transparent)。


以下是一个例子:
.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

在这个例子中,.element 是一个大小为 100x100 像素的蓝色方块,通过 box-shadow 属性为它添加了一个向右下方偏移的、模糊半径为 10px 的阴影,阴影颜色为半透明的黑色。

box-shadow 属性是创建元素阴影效果的常见方式,用于增强页面元素的立体感。


转载请注明出处:http://www.pingtaimeng.com/article/detail/6041/CSS