如何使用CSS制作阴影效果

一、使用box-shadow制作阴影效果

CSS3中提供了box-shadow属性，可以用于制作阴影效果。

.shadow {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

box-shadow的参数分别表示：水平偏移量、垂直偏移量、模糊半径、阴影颜色。

可以设置多个阴影效果：

.shadow {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.2);
}

二、使用text-shadow制作字体阴影效果

text-shadow属性可以用于在字体周围添加一个投影。

.shadow {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

text-shadow的参数与box-shadow类似，分别表示：水平偏移量、垂直偏移量、模糊半径、阴影颜色。

三、使用伪元素和:before/:after制作阴影效果

可以使用伪元素和before/:after为元素添加阴影效果。

.shadow:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

首先将伪元素的内容设为空，设置绝对定位，然后使用box-shadow属性创建阴影效果。

四、使用背景图片制作阴影效果

在背景图片中使用渐变效果可以制作出阴影效果。

.shadow {
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
}

linear-gradient的参数分别表示：渐变方向、起始颜色、结束颜色、颜色变化的百分比。

五、使用outline制作阴影效果

可以使用outline属性制作简单的边框阴影效果。

.shadow {
  outline: 2px solid rgba(0,0,0,0.2);
  outline-offset: -2px;
}

outline的参数分别表示：边框宽度、边框样式、边框颜色。

outline-offset表示轮廓的偏移量，可以用负值实现阴影效果。