borderをグラデーションにしたい
2020年06月18日
backgroundにグラデーションをかける方法
以下のような背景が白のボックスと背景がグラデーションのボックスを重ねることで枠線を表現します。
ラッパーにグラデーションをかけて中の要素は白色にすると以下のようになり、
ラッパーのためにHTMLの構造を変えたくなく、z-indexを使っていいなら疑似要素を使うと以下のようになります。
border-imageを使った方法
border-imageを使うともっと簡単にできます！border-imageは、border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeatの一括指定プロパティで、
今回はborder-image-sourceとborder-image-sliceを指定しています。
例えば当サイトのトップページでは、
スクロールに合わせてナビゲーションにグラデーションの下線が引かれ、これにはborder-imageを使っています。
