box-shadow不生效

box-shadow属性的格式为：box-shadow: length length length length color。根据你提供的代码，.wuc-tab元素的box-shadow属性设置为0 8rpx 8rpx 0 rgba(0, 0, 0, 0.21)。根据引用中的说明，第一个长度值表示阴影的水平偏移量，第二个长度值表示阴影的垂直偏移量，第三个长度值表示阴影的模糊半径，第四个长度值表示阴影的扩展半径，而color表示阴影的颜色。

有可能造成box-shadow不生效的原因有多种可能，以下是一些可能的解决方法：
1. 检查元素是否正确选择，确保选择器.wuc-tab正确匹配到你想要设置box-shadow的元素。
2. 检查单位是否正确，确保长度值后面的单位(例如rpx)是否有效，可以尝试使用px代替rpx。
3. 检查是否有其他样式覆盖了box-shadow属性，可以在选择器后面使用!important来强制应用box-shadow样式。
4. 检查颜色值是否正确，确保rgba(0, 0, 0, 0.21)是一个有效的颜色值。

如果以上解决方法都不起作用，可以尝试使用其他属性值来调整box-shadow的效果，例如调整偏移量、模糊半径或扩展半径，或者尝试其他颜色值。

相关问题

hover中的box-shadow不生效

### 解决方案

对于 `hover` 状态下 `box-shadow` 样式不生效的问题，通常是因为其他样式覆盖了该效果或是浏览器兼容性问题。为了确保 `box-shadow` 在 `hover` 事件触发时正常工作，可以采取以下措施：

#### 1. 使用标准前缀提高跨浏览器支持
不同浏览器可能对 CSS 属性的支持程度有所差异，因此建议加入多个供应商特定的前缀来增强兼容性。

.box {
    -webkit-box-shadow: 1px 4px 10px #ccc;
       -moz-box-shadow: 1px 4px 10px #ccc;
            box-shadow: 1px 4px 10px #ccc;
}

.box:hover {
    -webkit-box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.7);
            box-shadow: 2px 8px 20px rgba(0, 0, 0, 0.7);
}

上述代码通过增加 `-webkit-`, `-moz-` 前缀以及无前缀的标准属性，使得阴影效果可以在更多类型的现代浏览器上正确显示[^1]。

#### 2. 验证 z-index 和定位设置
有时即使设置了 `box-shadow`，但由于层叠上下文的原因也可能看不到预期的效果。此时应确认目标元素拥有合适的 `position` 定位方式（如 relative/absolute/fixed），并适当调整其 `z-index` 来防止被其他内容遮挡。

#### 3. 排查冲突的选择器优先级
如果页面中有更具体的选择器定义了相同的属性，则可能会导致自定义样式的失效。可以通过开发者工具检查实际渲染出来的样式表，找出是否有更高权重的选择器影响到了当前元素上的 `box-shadow` 设置。

#### 4. 测试伪类顺序
确保 `.box:hover` 的声明位于基础状态之后书写，因为 CSS 中后面的规则会覆盖前面相同级别的规则。

box-shadow内阴影不生效

以下是解决box-shadow内阴影不生效的方法：

1. 确保元素有足够的高度和宽度，以便阴影可以显示在元素内部。
2. 确保box-shadow属性的第三个参数为0，这将使阴影显示在元素内部而不是外部。
3. 确保元素的背景颜色不是透明的，否则阴影将显示在元素的背面而不是内部。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .2);
}