---

CSS3 box-shadow 属性

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

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

带有黑色 box-shadow 的黄色 <div> 元素

实例

div {
  box-shadow: 10px 10px;
} 亲自试一试 »

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

带有灰色 box-shadow 的黄色 <div> 元素

实例

div {
  box-shadow: 10px 10px grey;
} 亲自试一试 »

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

黄色的 <div> 元素，带有模糊的 box-shadow

实例

div {
  box-shadow: 10px 10px 5px grey;
} 亲自试一试 »

---

卡片

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

1

January 1, 2016

Hardanger, Norway

实例

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
} Try it (Text Card) » Try it (Image Card) »

---

CSS3 习题和测验

测验 1 » 测验 2 » 测验 3 » 测验 4 » 测验 5 »

---

CSS3 阴影属性

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

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