アウトラインにグラデーションを適用する

Question

アウトラインにグラデーションを適用するにはどうすればよいですか？

私が理解しているように、border-borderを使ってこれを行うことは可能ですが、アウトラインへのグラデーションの実装は見つかりませんでした。

可能ですか？

グラデーション例

linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%); 

編集：

ボーダー-画像は動作しませんので、私は、既存の境界線（1ピクセル＃000固体）を持っています。

編集＃2：

電流https://jsfiddle.net/b4x0fame/

のjsfiddle例黒枠を維持しながら、私は、アウトラインが勾配になりたいです。

Answer 1

border-imageをグラデーションに設定するだけです。この場合は、のようなもの：

border-width: 1px; 
border-style: solid; 
border-image: linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%); 

https://css-tricks.com/examples/GradientBorder/

Answer 2

.top-to-bottom { border-width: 1px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; }

<div class="top-to-bottom"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

Answer 3

はここでボーダー-画像の実施例です。あなたはそれをチェックアウトし、あなたのコード内で同じ技術を使用することができます。jsfiddle

<div class='bordered'>1</div> 

div { 
height: 100px; width: 100px; 
font-size: 50px; 
line-height: 100px; 
text-align: center; 
margin: 10px auto; 
background-clip: padding-box; 
} 
.bordered { 
border: 20px double pink; 
border-image: -webkit-linear-gradient(45deg,orange,yellow) 20 stretch; 
}