borderにグラデーション、いざやってみようと思うとあれ？borderプロパティに対してグラデーションをかけたらいいのかな？と少し戸惑います。
ちょっとしたコツさえつかめばすぐに再現できますので、ためしてみましょう！
実際にやってみよう
というわけで実際にやってみましょう。
See the Pen
グラデーションborder by kkdd (@kk8kk)
on CodePen.
はい、できました。
cssだけで見てみましょう。
|
1 2 3 4 5 |
.grdBorder { border-bottom: 3px solid #eeaeca; border-image: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(187,180,217,1) 50%, rgba(148,187,233,1) 100%); border-image-slice: 1; } |
まずは通常のborderを指定します。ベースにするborderの色はグラデーションの最初の色にしておくと無難です。
その次にborder-imageでグラデーションを指定します。普通の色、ではなくて画像として指定します。
最後にborder-image-sliceを指定します。
これは本当に画像を使用したときに色々と本領を発揮するタグなので今回は詳細を省きますが、とりあえず表示をさせるために値は1を指定してください。
たったこれだけを覚えておけば実現できます！
ちなみにbottomだけじゃなくて4辺すべてなど他の方向でも使うことができるので、ぜひ試してみてください。
See the Pen
グラデーションborder｜4辺 by kkdd (@kk8kk)
on CodePen.
