box-shadow没效果

你遇到了box-shadow没有效果的问题。这可能是由于以下几个原因导致的：

1. CSS样式错误：请确保你正确地应用了box-shadow属性，并且值的格式正确。例如，正确的格式是：box-shadow: h-offset v-offset blur spread color; 其中h-offset和v-offset是水平和垂直偏移量，blur是模糊半径，spread是阴影的扩展半径，color是阴影颜色。

2. 元素没有背景色：box-shadow属性需要元素有一个背景色才能正常显示阴影效果。如果你的元素没有背景色，阴影可能会被隐藏或无法看到。尝试为元素添加一个背景色，并重新检查阴影是否生效。

3. 元素位置或尺寸问题：如果元素的位置或尺寸不正确，阴影可能会被其他元素覆盖或裁剪掉。请确保元素已经正确地定位并且具有足够的空间来显示阴影效果。

4. 浏览器兼容性问题：某些老版本的浏览器可能不支持box-shadow属性，或者支持的方式与最新的CSS规范略有不同。你可以使用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; }

这段代码定义了 `.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秒的时间进行平滑过渡。可以根据需要调整阴影效果和过渡时间来实现所需的效果。

-moz-box-shadow和 -webkit-box-shadow 有什么区别

`-webkit-box-shadow` 是两个用于CSS为元素添加阴影效果的旧属性，它们分别对应于Mozilla Firefox浏览器的内核（Gecko）和Apple Safari及Chrome等WebKit浏览器的内核。主要区别在于：

1. **浏览器兼容性**：`-moz-box-shadow` 是Firefox早期版本使用的，随着Webkit的发展，包括Safari、Chrome在内的现代浏览器更倾向于使用 `-webkit-box-shadow`。如果你需要更好的跨浏览器支持，可能会优先选择后者。

2. **语法差异**：尽管功能相似，但语法格式略有不同。`-moz-box-shadow` 的语法是 `inset: h-offset v-offset blur spread color;`，而 `-webkit-box-shadow` 是 `inset: h-offset v-offset blur spread opacity;`，注意`:inset` 标志是否为内阴影，默认外阴影。

3. **特性支持**：有些细节特性仅在某个特定的前缀下可用。例如，`spread` 属性只在 `-webkit-box-shadow` 中有效，而在 Firefox 中应该使用 `box-shadow` 本身。

4. **渐变支持**：对于渐变阴影，`-webkit-box-shadow` 支持更广泛，而 `-moz-box-shadow` 的语法限制了这种可能性。