有沒有辦法為特定像素創建css3邊框漸變？

Question

我知道這可能與背景漸變有關，但無法弄清楚如何為邊框漸變實現這一點。

這是我到目前為止所擁有的

-webkit-border-image  : -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000)) 1 100%; 
-webkit-border-image  : -webkit-linear-gradient(#666, #000) 1 100%; 
-moz-border-image     : -moz-linear-gradient(#666, #000) 1 100%; 
-o-border-image       : -o-linear-gradient(#666, #000) 1 100%; 
border-image          : linear-gradient(to bottom, #666, #000) 1 100%;

我想從底部向上的第一個32px是黑色，然后其余的向上灰色（＃666）。

Answer 1

我建議你這樣做：使用一個pseudo-element :before你:before定位在bottom:0和left:-15px ，因為15px是邊框的寬度。 如果更改border-width ，則left:-15px更改left:-15px

它的width:15px相同width:15px

我使用width:15px和background:#000但你可以簡單地使用border-left:15px solid #000而不是那兩個。 結果是一樣的。

 .borderme { position:relative; height:300px; border-left:15px solid #666; } .borderme:before { position:absolute; height:32px; width:15px; background:#000; bottom:0; left:-15px; content:""; } 

 <div class="borderme"> </div> 

Answer 2

檢查此站點 ，您可以在其中創建css漸變並獲取代碼並粘貼到您的CSS中。