如何在CSS中叠加多个box-shadow样式而无需新增组合类？

通常我们可以给元素同时应用多个类来组合不同属性的样式，比如：

.class1 {
    color: white;
}

.class2 {
    background-color: black;
}

在HTML中这样使用就能同时生效两个属性：

<p class="class1 class2">text</p>

但遇到box-shadow这类支持多值叠加的属性时，直接给元素加多个类会导致样式覆盖：

.bottom {
    box-shadow: 0 1em red;
}

.top {
    box-shadow: 0 -1em red;
}

如果给元素同时添加.bottom和.top类，只会生效最后加载的那个box-shadow，无法同时显示上下两个阴影。

我不想创建.bottom-top这类组合类——一来其他人可能搞不清类名顺序，二来如果后续新增.left、.right类，组合类的数量会指数级增长（至少需要(2^n)-1个，n为初始类数量）。之前尝试用box-shadow: inherit, <shadow>继承已有阴影再添加新样式，但没有效果。

请问CSS里有没有办法实现这种无需组合类就能叠加多个box-shadow的需求？

解决方案：用CSS变量实现灵活叠加 #

这是最灵活的方案，能支持任意数量的阴影组合：

1. 给每个方向的阴影类定义对应的CSS变量：

.bottom {
    --shadow-bottom: 0 1em red;
}

.top {
    --shadow-top: 0 -1em red;
}

.left {
    --shadow-left: -1em 0 red;
}

.right {
    --shadow-right: 1em 0 red;
}

2. 定义一个基础容器类，把所有阴影变量拼接成box-shadow属性：

.shadow-box {
    box-shadow: 
        var(--shadow-top, none)
        var(--shadow-bottom, none)
        var(--shadow-left, none)
        var(--shadow-right, none);
}

这里var(--变量名, none)的作用是：如果元素没加对应的类（变量未定义），就用none占位，不会影响其他阴影的显示。

3. 在HTML中直接组合需要的类即可：

<div class="shadow-box top bottom">上下阴影</div>
<div class="shadow-box left right">左右阴影</div>
<div class="shadow-box top bottom left right">四向阴影</div>

备选方案：用:is()选择器预定义组合样式 #

如果是固定的几种组合场景，也可以用:is()选择器批量处理，避免手动写所有组合类：

.bottom {
    box-shadow: 0 1em red;
}

.top {
    box-shadow: 0 -1em red;
}

.left {
    box-shadow: -1em 0 red;
}

.right {
    box-shadow: 1em 0 red;
}

/* 叠加上下阴影 */
:is(.top.bottom) {
    box-shadow: 0 -1em red, 0 1em red;
}

/* 叠加左右阴影 */
:is(.left.right) {
    box-shadow: -1em 0 red, 1em 0 red;
}

/* 叠加四向阴影 */
:is(.top.bottom.left.right) {
    box-shadow: 0 -1em red, 0 1em red, -1em 0 red, 1em 0 red;
}

这种方案的局限性是需要提前预想到所有可能的组合，不如CSS变量灵活。

内容的提问来源于stack exchange，提问作者Torres