box-shadow属性

box-shadow属性用于为元素添加一个或多个阴影效果。其语法为：

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

其中：

- h-shadow：必需。表示水平方向上的阴影偏移量，可以为负值。
- v-shadow：必需。表示垂直方向上的阴影偏移量，可以为负值。
- blur：可选。表示模糊半径，值越大，阴影越模糊，可以为0。
- spread：可选。表示阴影的扩展大小，可以为负值。
- color：可选。表示阴影的颜色，默认为黑色。
- inset：可选。如果指定该值，则阴影将被绘制在元素内部。

示例：

div {
  box-shadow: 10px 10px 5px grey;
}

此例中，元素会生成一个水平偏移量为10px，垂直偏移量为10px，模糊半径为5px，颜色为灰色的阴影。

相关问题

css box-shadow属性

回答: CSS的box-shadow属性用于为元素添加阴影效果。 它可以设置水平方向和垂直方向的阴影，以及阴影的模糊程度和扩展程度。 box-shadow的语法为：box-shadow: h-shadow v-shadow blur spread color inset; [1其中h-shadow表示水平方向的阴影，v-shadow表示垂直方向的阴影，blur表示阴影的模糊程度，spread表示阴影的扩展程度，color表示阴影的颜色，inset表示是否为内阴影。举个例子，如果要为一个容器添加一个水平方向20像素、垂直方向20像素的阴影，可以使用以下代码：.container{ box-shadow: 20px 20px; } [2如果想要设置左侧阴影，可以将h-shadow的值设置为负数，例如：.container{ box-shadow: -20px 20px; } [2另外，box-shadow还支持设置阴影的颜色，模糊程度和扩展程度。通过调整这些属性的值，可以实现各种不同的阴影效果。

box-shadow属性详解

box-shadow是CSS3中的新属性，可以给元素添加一个或多个阴影效果，使页面中的元素具有更加立体的效果。box-shadow属性有以下值：水平偏移量、垂直偏移量、模糊半径、阴影颜色。

水平偏移量和垂直偏移量的值可以为正、负值或0。正值将会使阴影向右下方偏移，负值将会使阴影向左上方偏移，0将会将阴影放置元素正下方。

模糊半径决定了阴影的模糊程度。值越大，阴影越模糊，效果越明显；值越小，阴影越清晰。

阴影颜色值可以使用任何有效的颜色值，包括命名颜色、十六进制、RGB或RGBA。如果省略了颜色值，则使用元素的文本颜色作为阴影颜色。

box-shadow也支持多个阴影，可以使用逗号分隔这些阴影值。例如，box-shadow:2px 2px 5px #ccc, 4px 4px 8px #aaa;是两个阴影效果，第一个偏移量是2px和2px，模糊半径是5px，颜色是#ccc；第二个偏移量为4px和4px，模糊半径为8px，颜色为#aaa。

box-shadow属性可以为文本、盒子以及其他CSS元素添加美丽的阴影效果，增加元素的具有立体感和深度，促进页面的视觉效果和美感，使页面更加富有创意性和个性化。