, ,

[HTML & CSS General] CSS: グラデーションのボーダー mixin

公開日: 2014/12/01
更新日: 2018/11/01

作り方が分からないシリーズ。
見出しなどの要素の下にグラデーションのボーダーを引きたい。

[markdown]
## 調査

border にグラデーションを施す手段は用意されていないので、background のグラデーションをずらして表示するとか。

> * [オンズ » 【CSS 3】border 要素にグラデーションを施す方法。](http://on-ze.com/archives/1459)

さらに調べると、いろいろな手法が紹介されていました。

> * [Gradient Borders](http://css-tricks.com/examples/GradientBorder/)

`linear-gradient` が IE8 で効かないので、fallback として `background-color` を設定しておきます。

> * [CSS Gradients | CSS-Tricks](http://css-tricks.com/css3-gradients/)

## mixin

いろいろな場面で利用できそうな気がしたので、Nicolas Gallagher さんの Pseudo Element Edges という手法を mixin にしてみました。
[Gistはこちら。](https://gist.github.com/DriftwoodJP/e1b2c8b6a23b423e9770)
コードとサンプルはこちら。

See the Pen CSS Gradient Bottom Border by DriftwoodJP (@DriftwoodJP) on CodePen.


[/markdown]