阴影CSS介绍

阴影CSS是一种让元素看起来有阴影效果的CSS样式。通过添加阴影，可以使元素在页面中更加醒目和立体化。

使用方式

可以通过CSS的box-shadow属性来添加阴影。这个属性接受4个参数，分别是<offset-x> <offset-y> <blur-radius> <spread-radius>。其中：

• <offset-x>和<offset-y>表示阴影的水平和垂直偏移量，单位可以是像素、百分比、em等。
• <blur-radius>表示阴影的模糊半径，越大越模糊。
• <spread-radius>表示阴影的扩散距离，负值表示缩小。

以下是一个简单的例子：

.shadow {
  box-shadow: 2px 2px 2px grey;
}

这个例子表示添加了一个2像素偏移量的灰色阴影，模糊半径为2像素。

实战应用

卡片阴影效果

卡片是Web页面中非常常见的元素，添加阴影可以使卡片更有层次感。以下是一个示例代码片段：

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 16px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

这个例子表示添加了一个带有过渡效果的阴影，当鼠标悬停在卡片上时阴影会放大。

文字阴影效果

为文字添加阴影可以让文字更加醒目。以下是一个示例代码片段：

.text-shadow {
  text-shadow: 2px 2px 2px grey;
}

这个例子表示为文字添加了一个2像素偏移量的灰色阴影。

注意事项

阴影CSS虽然可以增加元素的层次感，但过多的阴影会影响页面的渲染效率，因此在使用时要注意适量。

此外，在移动端等低性能设备上，建议使用较浅的阴影效果。