CSS Box Shadow

CSS box-shadow 属性

CSS box-shadow 属性应用阴影于元素。

最简单的用法是只指定水平阴影和垂直阴影：

css3_box-shadow_1.htm

实例

  1. div {
  2.   box-shadow: 10px 10px;
  3. }

接下来，为阴影添加颜色：

css3_box-shadow_2.htm

实例

  1. div {
  2.   box-shadow: 10px 10px grey;
  3. }

接下来，向阴影添加模糊效果：

css3_box-shadow_3.htm

实例

  1. div {
  2.   box-shadow: 10px 10px 5px grey;
  3. }

卡片

您还可以使用 box-shadow 属性创建纸质卡片效果：

css3_box-shadow_4.htm

css3_box-shadow_5.htm

实例

  1. div.card {
  2.   width: 250px;
  3.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  4.   text-align: center;
  5. }

CSS 阴影属性

下表列出了 CSS 的阴影属性：

属性 描述
box-shadow 向一个元素添加一个或多个阴影。
text-shadow 在文本中添加一个或多个阴影。