純粹的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

使用<span>小號:)

您可以添加你想要的<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元素：在

關於你的第二類使用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>

Answer 2

這可能與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 3

實際上，你可以只用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 4

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

每個班級添加一個新行。

*, 
 
*: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; 
 
}

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

Answer 5

您可以使用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 6

只是試圖讓儘可能多的行爲更多鈔票，使用假點，邊框，陰影...

你起牀到9號線，可設置/取消與9個獨立班。

他們中有些人需要將只對一個堅實的，衆所周知的背景色工作（在這種情況下，白色）

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

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