CSS 的 box-shadow 属性可以为元素添加一个或多个阴影效果。这个属性的值包括:
box-shadow: 2px 2px 4px #888888;
这个属性指定了一个偏移量为 2px 的水平阴影,一个偏移量为 2px 的垂直阴影,一个模糊半径为 4px 的阴影,阴影的颜色为 #888888。
如果要为元素添加多个阴影,可以使用逗号分隔它们。示例代码:
box-shadow:
2px 2px 4px #888888,
-2px -2px 4px #333333;
这个属性指定了两个阴影,一个是偏移量为 2px 的水平阴影和偏移量为 2px 的垂直阴影,模糊半径为 4px,颜色为 #888888,另一个阴影是偏移量为 -2px 的水平阴影和偏移量为 -2px 的垂直阴影,模糊半径为 4px,颜色为 #333333。
还可以使用 inset 关键字指定内阴影,示例代码:
box-shadow: inset 2px 2px 4px #888888;
这个属性指定了一个偏移量为 2px 的水平内阴影和偏移量为 2px 的垂直内阴影,模糊半径为 4px,颜色为 #888888。
除了 box-shadow,CSS 还有 text-shadow 属性,它可以为文本添加阴影效果。text-shadow 的用法和 box-shadow 很相似,只是它只能为文本添加阴影,而不能为元素添加阴影。
使用 box-shadow 属性的简单案例,实现了一个卡片效果:
HTML 代码:
<div class="card">
<h2>Card Title</h2>
<p>Card Content</p>
</div>
CSS 代码:
.card {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.card h2 {
margin-top: 20px;
text-align: center;
}
.card p {
margin-top: 40px;
text-align: center;
}
解释:
这个案例中,我们首先创建了一个 div 元素,并给它添加了一个类名为 "card"。然后,我们为这个 div 元素设置了宽度和高度,背景色和圆角属性。接着,我们使用 box-shadow 属性为这个 div 元素添加了一个阴影效果,它的偏移量为 0px 的水平阴影和偏移量为 4px 的垂直阴影,模糊半径为 10px,颜色为 rgba(0, 0, 0, 0.1)。