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

我知道這是可能的背景漸變，但無法弄清楚如何實現這個邊界漸變。有沒有辦法爲特定像素創建css3邊框漸變？

這裏是我到目前爲止

-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）。

Here is an example of what I would like my right border to look like

來源

2016-08-18 jmchauv

通過使用額外的容器元素來獲取背景和填充，或者定位的僞元素，可能更容易「僞造」邊界... – CBroe

@CBroe我肯定會在這裏使用':: after'路線。 – TylerH

我也會爲此使用':: after'選擇器 – AshboDev

我建議你做它像這樣：使用pseudo-element像:before你位置bottom:0和left:-15px，因爲15px是邊框的寬度。如果你改變了border-width更改left:-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>

來源

2016-08-18 14:52:57

這非常有幫助。感謝你付出的努力。 – jmchauv

-1

入住這site，您可以創建CSS漸變，讓你的代碼，並粘貼到你的CSS。

來源

2016-08-18 14:56:21

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

回答

相關問題