ボーダーにグラデーションを設定する

最近?流行のグラデーションをさくっとボーダーや、背景に設定する方法をメモ

グラデーションは「linear-gradient」

CSS

  1. .gradient–bg {
  2. background: linear-gradient(45deg,#007eff,#ff17b1);
  3. }
  4. .gradient–bd {
  5. border: 5px solid;
  6. border-image: linear-gradient(45deg,#007eff,#ff17b1) 1;
  7. }

こんな感じでCSSにクラスを作成して、適当な要素に付けてみる。

HTML

  1. <div class="gradient–bg"></div>
  2. <div class="gradient–bd"></div>

一部のボーダーのみにしたい場合は消したい部分を
「border-top:0;」
のようにすると

こんな感じに消せる。

他にもグラデーションの角度を変えたり、色を追加したり、動くようにしたりも出来るのでいろいろやってみるといいかも。