box-shadow怎么用

box-shadow属性用于向元素添加阴影效果，其语法如下：

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

其中，h-shadow和v-shadow为必填项，表示水平和垂直方向上的阴影偏移量；blur为可选项，表示阴影的模糊程度；spread也为可选项，表示阴影的扩散程度；color为阴影的颜色；inset为可选项，表示是否将阴影设置为内阴影。

例如，以下代码将一个div元素添加了一个灰色的外阴影：

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

以下代码将一个按钮元素添加了一个红色的内阴影：

button {
  box-shadow: inset 0 0 5px red;
}

相关问题

box-shadow使用说明

`box-shadow` 属性用于在一个元素的周围创建一个或多个阴影效果。

`box-shadow` 属性的语法如下：

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

其中，各属性含义如下：

- `h-shadow`：必需。水平阴影的位置。可以是正数（表示阴影在元素右侧）或负数（表示阴影在元素左侧）。
- `v-shadow`：必需。垂直阴影的位置。可以是正数（表示阴影在元素下方）或负数（表示阴影在元素上方）。
- `blur`：可选。阴影的模糊程度。值越大，阴影越模糊，可以为 0。
- `spread`：可选。阴影的扩散程度。正数表示阴影扩散，负数表示阴影收缩。
- `color`：可选。阴影的颜色。可以使用颜色值，如 `red`，也可以使用 RGBA 值，如 `rgba(0, 0, 0, 0.5)`。
- `inset`：可选。指定阴影是否为内阴影。如果设置为 `inset`，则阴影在元素内部，否则在外部。

示例：

.box {
  box-shadow: 10px 10px 5px #888888;
}

在上面的示例中，我们创建了一个 10px 水平偏移、10px 垂直偏移、5px 模糊程度、没有扩散、颜色为 #888888 的阴影，这个阴影在元素的外部。

你还可以使用多个 `box-shadow` 属性来创建多个阴影，每个属性之间使用逗号分隔，例如：

.box {
  box-shadow: 10px 10px 5px #888888, -10px -10px 5px #888888;
}

在上面的示例中，我们创建了两个阴影，一个在右下方，一个在左上方，它们的颜色和模糊程度都相同，但是偏移量和扩散方向不同，这样就可以创建一个立体感的效果。

.show-bar .html5-book .shadow{ -webkit-transition: -webkit-box-shadow 0.5s; -moz-transition: -moz-box-shadow 0.5s; -o-transition: -webkit-box-shadow 0.5s; -ms-transition: -ms-box-shadow 0.5s; -webkit-box-shadow:0 0 10px #999; -moz-box-shadow:0 0 10px #999; -ms-box-shadow:0 0 10px #999; -o-box-shadow:0 0 10px #999; box-shadow:0 0 10px #999; }

这段代码定义了 `.show-bar` 类下的 `.html5-book` 类下的 `.shadow` 类的 CSS 样式。它设置了一系列属性来控制元素的阴影效果和过渡效果。

.show-bar .html5-book .shadow {
  -webkit-transition: -webkit-box-shadow 0.5s;
  -moz-transition: -moz-box-shadow 0.5s;
  -o-transition: -webkit-box-shadow 0.5s;
  -ms-transition: -ms-box-shadow 0.5s;

  -webkit-box-shadow: 0 0 10px #999;
  -moz-box-shadow: 0 0 10px #999;
  -ms-box-shadow: 0 0 10px #999;
  -o-box-shadow: 0 0 10px #999;
  box-shadow: 0 0 10px #999;
}

这段代码的作用是为具有 `.shadow` 类的元素设置了一个阴影效果，并在阴影属性上应用了过渡效果。通过 `-webkit-box-shadow`、`-moz-box-shadow`、`-ms-box-shadow` 和 `box-shadow` 属性，指定了一个包含水平和垂直偏移以及模糊半径的阴影效果。同时，通过 `-webkit-transition`、`-moz-transition`、`-o-transition` 和 `-ms-transition` 属性，指定了在阴影属性上进行过渡效果的时间为0.5秒。当应用了 `.shadow` 类的元素发生阴影变化时，将以0.5秒的时间进行平滑过渡。可以根据需要调整阴影效果和过渡时间来实现所需的效果。