CSS: グラデーションのボーダー mixin

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

調査

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

オンズ » 【CSS 3】border 要素にグラデーションを施す方法。

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

Gradient Borders

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

CSS Gradients | CSS-Tricks

いろいろな場面で利用できそうな気がしたので、Nicolas Gallagher さんの Pseudo Element Edges という手法を mixin にしてみました。
Gistはこちら。
コードとサンプルはこちら。