css3给盒子设置阴影的属性是哪个

CSS3中，通过box-shadow属性可以为盒子（或其他页面元素）设置阴影。这个属性接受一组值，可以设置阴影的颜色、大小、模糊程度和偏移位置等信息。 首先，我们来看一下box-shadow属性的基本语法和简单示例：

CSS3 box-shadow属性

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

其中，各个值的含义分别是： - h-shadow: 设置水平方向上的阴影偏移量，可以是正值或负值，如果该值为正，则阴影在盒子的右侧，反之则在左侧。 - v-shadow: 设置垂直方向上的阴影偏移量，同样可以是正值或负值，如果该值为正，则阴影在盒子的底部，反之则在顶部。 - blur: 设置阴影的模糊程度，值越大则阴影越模糊，可以为0，表示不模糊。 - spread: 设置阴影的扩散程度，可以为正值或负值，正值则阴影扩散，负值则收缩。默认值为0。 - color: 设置阴影的颜色，可以为具体颜色值，也可以是rgba、hsla、hex等颜色表达方式。 - inset: 设置阴影是否为内阴影。如果该值为inset，则表示设置内阴影。否则为外阴影。 下面是一个简单示例，效果为一个带有阴影的红色盒子：

.red-box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 3px 3px 5px #888888;
}

上述代码中，box-shadow属性设置了水平偏移量和垂直偏移量均为3px，阴影模糊程度为5px，颜色为灰色(#888888)。由于没有设置扩散程度和内阴影属性，所以默认值均为0和外阴影。 除了基本的阴影设置，CSS3还提供了若干奇妙的阴影效果，如多重阴影、投影效果等。下面我们来看其中一种效果——模糊阴影：

CSS3多重阴影

多重阴影演示

.shadow-demo {
  width: 100px;
  height: 100px;
  background-color: #ddd;

  /* 多重阴影 */
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2),
              0 0 10px 6px rgba(0, 0, 0, 0.2),
              0 0 15px 9px rgba(0, 0, 0, 0.2),
              0 0 20px 12px rgba(0, 0, 0, 0.2),
              0 0 25px 15px rgba(0, 0, 0, 0.2);
}

上面这个例子中，box-shadow属性设置了5个阴影，每个阴影都具有不同的大小和模糊程度，并且都是用rgba()设置的半透明黑色，形成了类似描边的效果。 综上，box-shadow是CSS3中用来设置阴影的属性，可以为盒子（或其他页面元素）添加内阴影或外阴影，并且可以通过设置多个值及其属性来实现许多奇妙的阴影效果，是制作漂亮效果不可或缺的属性之一。