ボーダーにグラデーションを設定する
最近？流行のグラデーションをさくっとボーダーや、背景に設定する方法をメモ
グラデーションは「linear-gradient」
CSS
- .gradient--bg {
- background: linear-gradient(45deg,#007eff,#ff17b1);
- }
- .gradient--bd {
- border: 5px solid;
- border-image: linear-gradient(45deg,#007eff,#ff17b1) 1;
- }
こんな感じでCSSにクラスを作成して、適当な要素に付けてみる。
HTML
- <div class="gradient--bg"></div>
- <div class="gradient--bd"></div>
一部のボーダーのみにしたい場合は消したい部分を
「border-top:0;」
のようにすると
こんな感じに消せる。
他にもグラデーションの角度を変えたり、色を追加したり、動くようにしたりも出来るのでいろいろやってみるといいかも。