CSSでボーダーにグラデーションをかける方法3つ

CSSで枠線にグラデーションをかける方法を3パターンまとめました。たまにやる時に毎回良い方法がないか調べてしまうため、備忘録に。

1. 【前提】borderプロパティにグラデーションを指定する方法はない
2. 【方法1】背面要素の背景をグラデーション
3. 【方法2】疑似要素の背景をグラデーション
4. 【方法3】border-imageプロパティによるグラデーション
5. 【参考】CSSでグラデーションを生成するジェネレーター
6. 【まとめ】栃ノ心が優勝

【前提】borderプロパティにグラデーションを指定する方法はない

2017年1月現在、CSSのborderプロパティではグラデーションを実現することはできません。なので、疑似的にグラデーションの枠線を表現する方法を考えることになります。

【方法1】背面要素の背景をグラデーション

一番スタンダードな方法で、ググるといっぱい出てきます。入れ子にした要素のbackground-colorでボーダーっぽく表現します。

• 要素を入れ子にする
• 背面の要素をグラデーションで塗りつぶす
• 前面の要素を背景色（白とか）で塗りつぶしす

サンプルコード

<div class="demo-area">
	<div class="grad-demo1">
		<div class="grad-demo1_inner">方法1のデモ</div>
	</div>
</div>

.grad-demo1{
  padding: 1px;
  background: linear-gradient(to right, #00f, #f00);
}

.grad-demo1_inner{
  padding: 16px;
  background-color: #fff;
}

【方法2】疑似要素の背景をグラデーション

borderと疑似要素の組み合わせでグラデーションの枠線を表現します。ナナメのグラデーションには対応できませんが、一番お手軽じゃないかと思います。

• 上下（または左右）に疑似要素::beforeと::afterを表示
• 疑似要素の背景をグラデーションに
• 残った左右（または上下）に単色のborderを設定

サンプルコード

<div class="demo-area">
	<div class="grad-demo2">方法2のデモ</div>
</div>

.grad-demo2::before,
.grad-demo2::after{
  content: '';
  display: block;
  width: calc( 100% + 32px );
  height: 1px;
  margin-left: -16px;
  background: linear-gradient(to right, #00f, #f00);
}

.grad-demo2::before{
  margin-bottom: 16px;
}

.grad-demo2::after{
  margin-top: 16px;
}

【方法3】border-imageプロパティによるグラデーション

背景画像でやるとレスポンシブで枠線の太さが伸縮してブサイクになりますが、border-imageプロパティならキレイに表現きます。border-sliceの値の設定がちょっと分かりにくいかも。デモで使用している画像はこちら→

サンプルコード

<div class="demo-area">
	<div class="grad-demo3">方法2のデモ</div>
</div>

.grad-demo3{
  padding: 16px;
  border: solid 1px transparent;
  border-image: url("img/bg.jpg") 1 stretch;
}

【参考】CSSでグラデーションを生成するジェネレーター

最後にグラデーションのCSSコードを生成するツールを紹介しておきます。

cssでグラデーションを指定する際には、このジェネレーターをよく使っています。GUIで設定できて、ベンダープレフィックスとかもつけて出力してくれるので便利。直感的に表示を確認しながら設定できるのが良いです。

Sassのコードも生成できます。Compass依存です。

【まとめ】栃ノ心が優勝

平成30年初場所は栃ノ心が初優勝となりました。

この人はとくに上半身の筋肉がすごく鍛えられていてカッコイイ。脂肪が少なくて目立つというのもあるけど。体もデキていて、相撲も安定しているし、今場所特有の気持ちの乗りとか、上位陣不在・不調を差し引いても、単発にならず今後も引き続き活躍してくれるだろうという感じがします。

逸ノ城も今場所は気持ちが前向きで強さが出ていてよかった。御嶽海はなんか調子の波とか上位陣キラーな感じを見ていると、ポスト稀勢の里っていう感じがしてきた。まわしの色も…。

幕下以下で注目していたところでは、三段目では魁皇の浅香山部屋から魁勝が全勝優勝と素晴らしい成績。琴欧州の鳴門部屋からは、話題の虎来欧は怪我もあって振るわなかったけど欧翔山が勝ち越して勢い良いですね。