有没有办法为特定像素创建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边框渐变？

回答

相关问题