問題提議
See the Pen Qiitaサンプル｜グラデーションのボーダーを表現するCSSテクニック by toshifumi.imanishi (@toshifumi) on CodePen.
上図のようなグラデーションのボーダーをCSSで表現する場合、border-imageでグラデーションを表現しようかと思いますが、border-imageとborder-radiusの併用ができません。
背景画像とコンテンツ用のHTML要素を2つ用意する方法もありますが、同様の考え方でなるべく無駄なマークアップを避けた方法を紹介します。
解決法
HTML
<button class="button" type="button">CLICK ME</button>
用意していただくHTML要素は上記のみです。
backgroundで白塗りとグラデーションの複数指定し、background-clipでそれぞれ異なる値を指定します。border-colorは透過をあらわすtransparentを指定しましょう。また背景はデフォルトでパディングボックスの左上を基準に配置されるので、background-originでボーダーボックスに基準を合わせましょう。※便宜上、Sassを使用してます。
Sass
$color-white: linear-gradient(white, white);
$gradation: linear-gradient(90deg, rgb(194,107,163) 0%, rgb(142,114,155) 53%, rgb(108,92,140) 100%);
$width: 150px;
$height: 44px;
$boder-width: 2px;
.button {
background: $color-white, $gradation;
background-clip: padding-box, border-box;
background-origin: border-box;
border: $boder-width solid transparent;
border-radius: #{$height/2} / 50%;
width: $width;
height: $height;
}
いかがでしたでしょうか？今回紹介したテクニックのようなマークアップとスタイルが混在しないコーディングを目指しましょう。