CSS3 Box 盒子阴影
CSS3 box-shadow 属性
CSS box-shadow 属性应用阴影于元素。
最简单的用法是只指定水平阴影和垂直阴影:
带有黑色 box-shadow 的黄色 <div> 元素
接下来，为阴影添加颜色:
带有灰色 box-shadow 的黄色 <div> 元素
接下来，向阴影添加模糊效果:
黄色的 <div> 元素，带有模糊的 box-shadow
卡片
您还可以使用 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 习题和测验
CSS3 阴影属性
下表列出了 CSS 的阴影属性:
| 属性 | 描述 |
|---|---|
| box-shadow | 向一个元素添加一个或多个阴影。 |
| text-shadow | 在文本中添加一个或多个阴影。 |
