ボタンやカードの枠線にグラデーションをかけたい、という要望は制作の現場でよく出てきます。ところがこれまでのCSSでは、枠線そのものに直接グラデーションを指定する手立てがありませんでした。地方の小さなサイトから大規模サイトまで、デザイナーが同じ回り道を強いられてきた領域です。ここに動きがあったので共有します。
これまで枠線グラデーションは回り道が必要だった
border-colorには単色しか指定できません。そのためグラデーションの枠線を作るには、いくつかの遠回りな方法が使われてきました。代表的なのがborder-imageを使う書き方ですが、角丸との相性が悪く、border-radiusを当てると角が欠けてしまうという弱点があります。
もうひとつは、擬似要素や入れ子の要素を重ねて、背景のグラデーションを枠線に見せかける方法です。こちらは角丸にも対応できますが、余分なマークアップが増え、レイアウトの計算も複雑になります。SVGで枠を描いて重ねるやり方もありますが、いずれにしても本来の目的に対して手数が多すぎました。
結果として、枠線グラデーションは「できなくはないが、毎回コピーしてきた定型のコードを貼り付けて使う」ような、少し身構える表現になっていました。どれも「枠線にグラデーション」というシンプルな見た目のわりに、裏側の手間が大きいのが実情です。新しく担当する制作者がコードを読み解くときにも、なぜこんな構造になっているのか分かりにくいという副作用がありました。
background-clipにborder-areaという値が加わった
Chrome 150で、background-clipプロパティにborder-areaという新しい値が入りました。これは要素の背景を、枠線が描かれる範囲に沿って切り抜くという指定です。border-widthとborder-styleを踏まえて背景を枠線の形に合わせ、border-colorの透明度は無視します。
やっていることは単純で、背景にグラデーションを敷き、それを枠線の領域だけに見えるよう切り抜く、という発想です。border-imageのような専用の仕組みではなく、使い慣れた背景まわりのプロパティの延長で枠線を装飾できるのが利点です。角丸ともきれいに馴染みます。なおこの機能は先にWebKit系のブラウザが搭載しており、今回のChrome側の対応で足並みがそろった形になります。
実際の書き方と気をつける点
基本の流れは、background-imageにグラデーションを指定し、background-clipにborder-areaを指定し、あわせてbackground-originをborder-boxにする、という三点セットです。background-originを省くと初期値のpadding-boxで描かれてしまい、グラデーションの位置が枠線とわずかにずれます。ここは忘れやすい落とし穴なので、border-boxを明示しておくと安全です。
枠線を実際に見せるには、border-styleをsolidにしてborder-widthで太さを与える必要があります。透明な枠線では切り抜く範囲そのものが生まれないためです。破線や点線を指定すれば、その途切れた形のままグラデーションが乗るので、単なるグラデーション枠にとどまらない装飾も作れます。詳しい挙動はChrome 150の公式ブログにまとまっているので、導入前に一度目を通しておくとよいでしょう。
既存の背景色や背景画像と組み合わせたいときは、backgroundを複数レイヤーで重ねる書き方になります。枠線用のグラデーションと本体の背景を別々のレイヤーとして指定し、border-areaを枠線側のレイヤーにだけ効かせる、という整理をしておくと崩れにくくなります。
中小企業サイトでどう活かせるか
現時点では対応ブラウザがまだ限られるため、すべての来訪者に同じ見た目を届ける用途には早すぎます。実務では、枠線グラデーションを装飾の飾りと位置づけ、対応していないブラウザでは単色の枠線にフォールバックさせる考え方が無理のない使い方です。見た目が少し華やかになるかどうかの差であれば、対応環境だけで恩恵を受けられれば十分という判断もできます。
キャンペーンのバナーや、目立たせたいボタン、料金プランのカードなど、装飾の効果が効く場所は中小企業サイトにもよくあります。これまで擬似要素を積んで実現していた表現が、背景まわりの数行で書けるようになるのは、保守のしやすさという点でも歓迎できる変化です。ブラウザ全体に広がるのを待ちつつ、手元の環境で挙動を試しておくと、対応がそろったときにすぐ使い始められます。
