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

Question

我正在寻求实现这种多重下划线效果，并且发现使用盒阴影将是最好的方法。具体来说，我尝试这样做并取得了成功：

我使用以下CSS来执行此操作：

h1{
    box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
    float: left;
}

但是，我希望实现根据需要打开和关闭特定下划线的效果。所以我提出了这个并将类添加到我的HTML中：

h1{
    float: left;
}
.red{
    box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
    box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
    box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}

但它产生的影响是：

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

Answer 1

这可以通过pseudo elements完成：

h1 {
  display:inline-block;
  border-bottom:2px solid #e8353b;
  position:relative;
}
  h1:before {
    content:"";
    height:2px;
    width:100%;
    background:#2762be;
    display:block;
    position:absolute;
    bottom:-6px;
  }
  h1:after {
    content:"";
    height:2px;
    width:100%;
    background:#a3514f;
    display:block;
    position:absolute;
    bottom:-10px;
  }

<h1>Hello there</h1>

Answer 2

使用<span>的有趣方式：）

您可以根据需要添加任意数量的<span>，只需在CSS中扩展调色板：

＆＃13;

＆＃13;

.borders {
  display: inline-block;
}
.borders span {
  display: block;
  height: 2px;
  margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */

＆＃13;

<h1 class="borders">
  Hi there
  <span></span>
  <span></span>
  <span></span>
</h1>

＆＃13;

＆＃13;

＆＃13;

或者，如果您只需要3个边框，并且不想插入其他HTML元素：

为您的第一堂课使用border-bottom，而在第二堂课时使用:before，在第三堂课使用:after。

＆＃13;

＆＃13;

h1 {
  position: relative;
  display: inline-block;
}

.red{
  box-shadow: 0 2px 0 red;
}

.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }

.blue:after{
  bottom: -6px;
  border-bottom: 2px solid blue;
}

.green:before{
  bottom: -10px;
  border-bottom: 2px solid green;
}

＆＃13;

<h1 class="red blue green">Hi there</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用linear-gradient，这将是完全透明的。

注意，当你按照你的方式组合类时，它们不会合并这些值，元素上的最后一个属性将覆盖任何先前的属性，无论它们是否设置在不同的类中是否姓名，因此您的行变为全棕色。

body {
  background: lightgray
}

h1{
    float: left;
    padding-bottom: 8px;
    background-size: 100% 2px;                         /* thickness 2px */
    background-repeat: no-repeat;
    background-position: 
      left bottom, left bottom 4px, left bottom 8px;   /* gutter 2px */ 
    background-image:
      linear-gradient(to right, blue, blue),           /* bottom line */
      linear-gradient(to right, green, green),         /* middle line */
      linear-gradient(to right, red, red);             /* top line */
  }
  
h1.red{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, green, green),      
      linear-gradient(to right, transparent,transparent);
}
h1.blue{
    background-image:
      linear-gradient(to right, transparent,transparent),
      linear-gradient(to right, green, green),      
      linear-gradient(to right, red, red);      
}
h1.green{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, transparent,transparent),
      linear-gradient(to right, red, red);      
}

<h1>Hello there</h1>

<h1 class="green">Hello there</h1>

<h1 class="red">Hello there</h1>

<h1 class="blue">Hello there</h1>

您可以轻松地重新定位线条并缩小任何间隙，只需省略您不想要的线条。

body {
  background: lightgray
}

h1{
    float: left;
    padding-bottom: 8px;
    background-size: 100% 2px;                         /* thickness 2px */
    background-repeat: no-repeat;
    background-position: 
      left bottom, left bottom 4px, left bottom 8px;   /* gutter 2px */ 
    background-image:
      linear-gradient(to right, blue, blue),           /* bottom line */
      linear-gradient(to right, green, green),         /* middle line */
      linear-gradient(to right, red, red);             /* top line */
  }
  
h1.red{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, green, green);     
}
h1.blue{
    background-image:
      linear-gradient(to right, green, green),      
      linear-gradient(to right, red, red);      
}
h1.green{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, red, red);      
}

<h1>Hello there</h1>

<h1 class="green">Hello there</h1>

<h1 class="red">Hello there</h1>

<h1 class="blue">Hello there</h1>

Answer 4

实际上，您只能使用1个伪元素执行此操作。

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

h1 {
    display: inline-block;
    /* controls the last line */
    border-bottom: 2px solid #a3514f;
}

h1:after {
    content: "";
    display: block;
    /* controls space between 1st and 2nd line */
    height: 2px;
    width: 100%;
    /* controls space between 2nd and 3rd line */
    margin-bottom: 2px;
    border-bottom: 2px solid #2762be;
    border-top: 2px solid #e8353b;
}

<h1>Hello there</h1>

这是基于@APAD1's answer编写的，采用了他的使用边界的想法。

此方法提供的优势是整个::after成为<h1>内容的一部分，而不是在外面。

Answer 5

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

每个班级都添加一个新行。

＆＃13;

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
h1 {
  display: inline-block;
  padding-bottom: 2px;
  position: relative;
}
h1:before,
h1:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  bottom: -10px;
}
h1:after {
  bottom: -18px;
}
.one {
  border-bottom: 2px solid red;
}
.two:before {
  border-top: 2px solid blue;
}
.three:before {
  border-bottom: 2px solid green;
}
.four:after {
  border-top: 2px solid brown;
}
.five:after {
  border-bottom: 2px solid orange;
}

＆＃13;

<h1 class="one two three four five">Lorem ipsum</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 6

尝试使用伪，边框，阴影来获取尽可能多的线条

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

它们中的一些只需要对固体的已知背景颜色（在这种情况下为白色）

＆＃13;

＆＃13;

.base {
  font-size: 60px;
  position: relative;
  display: inline-block;
}

.base:before,
.base:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 10px;
  padding: 10px 0px;
  background-clip: content-box;
}

.base:before {
  bottom: -90px;
}
.base:after {
  bottom: -170px;
}

.a {
  border-bottom: solid 10px lightgreen;
}

.b {
  box-shadow: 0px 10px white, 0px 20px green;
}

.c:before {
  border-top: solid 10px lightblue;
}

.d:before {
  background-color: red;
}

.e:before {
  border-bottom: solid 10px yellow;
}

.f:before {
  box-shadow: 0px 10px white, 0px 20px green;
}

.g:after {
  border-top: solid 10px tomato;
}

.h:after {
  background-color: magenta;
}

.i:after {
  border-bottom: solid 10px gray;
}

.j:after {
  box-shadow: 0px 10px white, 0px 20px brown;
}

＆＃13;

<h1 class="base a b c d e f g h i j">Hello world</h1>

＆＃13;

＆＃13;

＆＃13;