CSSのborder-imageプロパティを利用して、グラデーションのボーダーを作成します。
デモページはこちら
border-imageはborder-image-source、border-image-slice、border-image-width、border-image-outsetの各プロパティをショートハンドで指定できます。
グラデーションのボーダーを作成する場合は、borderプロパティでボーダーの幅とスタイルのみ指定しておきます。色を指定する必要はありません。
あとはborder-imageでborder-image-sourceとborder-image-sliceのみ指定すれば表示できます。border-image-sourceにはグラデーションを、border-image-sliceには1を指定します。
border-image-widthはボーダーの幅を指定するプロパティですが、省略した場合はborderプロパティの指定が適用されます。
.text01 {
border: 6px solid;
border-image: linear-gradient(-45deg, #AA8115 0%, #EBC767 50%, #AA8115 100%) 1;
}
以下のようにプロパティを分けて記述しても同じ結果になります。
.text01 {
border: 6px solid;
border-image-source: linear-gradient(-45deg, #AA8115 0%, #EBC767 50%, #AA8115 100%);
border-image-slice: 1;
}
border-image-sliceはボーダーに表示したい画像を9分割にする際の、スライスの距離を指定するプロパティです。単位は省略して指定しますが、1なら1px、100なら100pxとなります。
今回は画像ではなくグラデーションなので、0以外の整数であれば問題ありません。便宜上1を指定しています。
なお、この方法でグラデーションのボーダーを角丸にすることはできません。





