如何讓底部邊框漸變？

Question

實例：

您好，我需要幫助創建與漸變，透明邊的底部邊框。

我該如何去創造這種效果？

Answer 1

你可以使用一個僞元素對於這一點，允許更高的瀏覽器支持比邊防圖像..

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #222; 
 
} 
 
hr { 
 
    position: relative; 
 
    height: 0; 
 
    border: 0; 
 
} 
 
hr:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: 5px; 
 
    width: 100%; 
 
} 
 
.demo1:before { 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
} 
 
.demo2:before { 
 
    background: linear-gradient(to right, rgba(179, 220, 237, 0) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 0) 100%); 
 
} 
 
.demo3:before{ 
 
    background: linear-gradient(to right, rgba(182,224,38,0) 0%,rgba(177,222,39,1) 50%,rgba(171,220,40,0) 100%); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<hr class="demo1" /> 
 
<br /> 
 
<hr class="demo2" /> 
 
<br /> 
 
<hr class="demo3" />

請注意

• 前綴已經在這裏已經通過無前綴腳本自動包含在內。
• 我已將hr元素用於演示目的。然而，這種效應可以在支持使用僞元件（即div，a，p等）