纯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

这可以使用伪元素来完成:

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>s :)

您可以添加任意多个<span>,只需在CSS中扩展调色板:

.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 */

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

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

使用a border-bottom作为你的第一堂课,而不是:before你的第二堂课和:after第三堂课.

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;
}

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