Javascript 纯CSS解决方案，可动态添加多个框阴影

我希望实现这种多重下划线效果，并发现使用方框阴影将是最好的方法。具体而言，我尝试过这样做，并取得了成功：

我使用了以下CSS来实现这一点：

h1{
盒影：02px0px0px#F03A47，04px0px#FFF，06px0px#276FBF，08px0px#FFF，010px0px#af5b；
浮动：左；
}

但是，我希望能够根据需要打开和关闭特定的下划线。所以我想到了这个，并将这些类添加到我的HTML中：

h1{
浮动：左；
}
瑞德先生{
盒影：0 2px 0px 0px#F03A47，0 4px 0px 0px#FFF；
}
蓝先生{
盒影：0 6px 0px#276FBF，0 8px 0px 0px#FFF；
}
布朗先生{
盒影：0 10px 0px#af5b，0 12px 0px 0px#FFF；
}

但它产生的效果是：

---

我尝试以不同的顺序添加类，并使用JavaScript动态添加它们，但仍然得到相同的结果。我是否做错了什么，或者是否有其他方法可以实现打开-关闭效果？

这可以通过以下方法实现：

h1{
显示：内联块；
边框底部：2个实心#e8353b；
位置：相对位置；
}
h1：之前{
内容：“；
高度：2倍；
宽度：100%；
背景：#2762be；
显示：块；
位置：绝对位置；
底部：-6px；
}
h1：之后{
内容：“；
高度：2倍；
宽度：100%；
背景：#a3514f；
显示：块；
位置：绝对位置；
底部：-10px；
}

---

你好

使用

s:）的有趣方式

您可以添加任意数量的

，只需扩展CSS中的颜色调色板即可：

.borders{
显示：内联块；
}
.边界跨度{
显示：块；
高度：2倍；
保证金：2倍；
}
.边框跨度：第n个子（1）{背景：红色；}
.边框跨度：第n个子（2）{背景：蓝色；}
.边框跨度：第n个子（3）{背景：绿色；}
/*在此处添加更多内容*/

你好

实际上，您只需要一个伪元素就可以做到这一点

以下是我所做的（关于如何控制间距的评论）：

h1{
显示：内联块；
/*控制最后一行*/
边框底部：2个实心#a3514f；
}
h1：之后{
内容：“；
显示：块；
/*控制第一行和第二行之间的间距*/
高度：2倍；
宽度：100%；
/*控制第2行和第3行之间的间距*/
边缘底部：2px；
边框底部：2个实心#2762be；
边框顶部：2个实心#e8353b；
}

---

您好

您最多可以使用伪元素和边框添加五行

每个类添加一个新行

*，
*：之前，
*：之后{
框大小：边框框；
}
h1{
显示：内联块；
垫底：2件；
位置：相对位置；
}
h1：之前，
h1：之后{
内容：“；
位置：绝对位置；
左：0；
右：0；
高度：6px；
底部：-10px；
}
h1：之后{
底部：-18px；
}
.一{
底部边框：2倍纯红；
}
.2:以前{
边框顶部：2件纯蓝；
}
.三：以前{
底部边框：2倍纯绿；
}
.四：之后{
边框顶部：2件纯色棕色；
}
.5：之后{
底部边框：2倍纯色橙色；
}

---

Lorem ipsum

您可以使用完全透明的

线性渐变

注意，当像您那样合并类时，它们不会合并这些值，元素上设置的最后一个属性将覆盖任何以前的属性，无论它们是否在具有不同名称的类中设置，因此您的行将变为全棕色


正文{
背景：浅灰色
}
h1{
浮动：左；
垫底：8px；
背景尺寸：100%2px；/*厚度2px*/
背景重复：无重复；
背景位置：
左下角，左下角4px，左下角8px；/*排水沟2px*/
背景图像：
线性渐变（向右、蓝色、蓝色），/*底线*/
线性渐变（向右、绿色、绿色），/*中间线*/
线性渐变（向右、红色、红色）；/*顶线*/
}
h1.红色{
背景图像：
线性渐变（向右，蓝色，蓝色），
线性渐变（向右、绿色、绿色），
线性渐变（向右、透明、透明）；
}
h1.蓝色{
背景图像：
线性渐变（向右、透明、透明），
线性渐变（向右、绿色、绿色），
线性渐变（向右、红色、红色）；
}
h1.绿色{
背景图像：
线性渐变（向右，蓝色，蓝色），
线性渐变（向右、透明、透明），
线性渐变（向右、红色、红色）；
}
你好
你好
你好
您好

正在尝试使用伪线、边框和阴影获取尽可能多的线条

最多可以有9行，可以用9个独立的类设置/取消设置

其中一些只需在坚实的已知背景色（本例中为白色）下工作

.base{
字体大小：60px；
位置：相对位置；
显示：内联块；
}
.基地：之前，
.基地：之后{
内容：“；
位置：绝对位置；
左：0px；
宽度：100%；
高度：10px；
填充：10px 0px；
背景剪辑：内容框；
}
.基地：之前{
底部：-90px；
}
.基地：之后{
底部：-170px；
}
.a{
边框底部：实心10px浅绿色；
}
.b{
盒影：0px 10px白色，0px 20px绿色；
}
c:以前{
边框顶部：实心10px浅蓝色；
}
d:以前{
背景色：红色；
}
e:以前{
边框底部：实心10px黄色；
}
f:以前{
盒影：0px 10px白色，0px 20px绿色；
}
g:之后{
边框顶部：实心10px番茄；
}
h:之后{
背景色：洋红色；
}
i:之后{
边框底部：实心10px灰色；
}
j:之后{
盒影：0px 10px白色，0px 20px棕色；
}

Hello world

很明显，白色条纹（使用

#fff

）不是