CSS3属性box-shadow使用详细教程

box-shadow是CSS3新增的一个属性，可以为元素创建一个或多个投影。通过box-shadow属性，我们可以实现一些光影效果，比如阴影、发光等。

语法与用法

box-shadow属性的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，

• h-shadow：表示水平阴影的位置，如果为负值，则阴影在元素左侧，如果为正值，则阴影在元素右侧；
• v-shadow：表示垂直阴影的位置，如果为负值，则阴影在元素上端，如果为正值，则阴影在元素下端；
• blur：表示模糊半径，值越大，阴影越模糊，如果值为0，则阴影不显示；
• spread：表示阴影的大小，如果值为正，则阴影扩大，如果为负，则阴影收缩，如果不指定，则阴影大小和元素一样；
• color：表示阴影颜色，可以使用色值、RGB值、HSL值等表示；
• inset：可选值，如果为inset，则表示阴影在元素内部。如果不指定，则为外部阴影。

可以同时指定多个投影，每个投影放在逗号之后。

示例

1. 实现一个带阴影的按钮

<button class="shadow-btn">Click me!</button>

.shadow-btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  background-color: #3498db;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}

代码说明：

• 首先定义了一个按钮，使用button标签，并赋予样式类.shadow-btn；
• 然后设置按钮的基本样式，包括padding、border、border-radius、color和background-color；
• 最后通过box-shadow实现阴影效果，h-shadow和v-shadow均为0，表示阴影位于元素正下方，颜色为黑色半透明，大小为5px，模糊半径为5px。

2. 实现一个灯泡的发光效果

<div class="light"></div>

.light {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 0, 0.5);
  box-shadow: 0px 0px 50px 10px rgba(255, 255, 0, 0.5) inset;
  animation: light-blink 1s infinite;
}

@keyframes light-blink {
  0% {
    box-shadow: 0px 0px 50px 10px rgba(255, 255, 0, 0.5) inset;
  }
  50% {
    box-shadow: 0px 0px 50px 10px rgba(255, 255, 0, 0.8) inset;
  }
  100% {
    box-shadow: 0px 0px 50px 10px rgba(255, 255, 0, 0.5) inset;
  }
}

代码说明：

• 首先定义了一个圆形灯泡，使用div标签，并赋予样式类.light；
• 然后设置灯泡的基本样式，包括width、height、border-radius和background-color；
• 通过box-shadow实现灯泡的发光效果，同时使用inset将阴影放在元素内部。阴影的大小为50px，模糊半径为10px，颜色为黄色半透明；
• 最后定义了一个动画效果，让灯泡的颜色闪烁。在动画中，通过改变box-shadow的参数来实现颜色变化。

结语

通过使用box-shadow属性，我们可以实现一些炫酷的效果，比如阴影、发光等。学会这个属性对于美化网页样式有一个很大的帮助。