目次
フィルターなし
See the Pen border-imageオーバレイなし by ito web制作 (@ito-web) on CodePen.
フィルターあり(擬似要素)
See the Pen フィルターあり(擬似要素) by ito web制作 (@ito-web) on CodePen.
border-imageでの実装方法を知る以前は擬似要素を使用していました。
z-indexを付与して重ねる順番を指定しなければならず、かなり面倒くさく感じていました。
フィルターあり(border-image)
See the Pen Untitled by ito web制作 (@ito-web) on CodePen.
border-imageを使用するとコード記述量が減ります。1行で完了です💪
border-imageで画像にフィルターをかける方法border-image: fill 0 linear-gradient(to right, #0001 0%, #000 100%);
以下のサイトを参考にしました🙏
WEBST8のコードブログ
【CSS border-imageの使い方】枠線に画像表示する方法
border-imageは、要素の枠線に好きな画像を表示させることができるCSSプロパティです。下記の5つのCSSプロパティを同時に指定できます。 なお、border-imageで一括指
