【CSS Modules】mask-border省略形プロパティの使い方

mask-borderプロパティは、要素の境界線を画像やSVG（Scalable Vector Graphics）を用いてマスクするためのショートハンドプロパティです。このプロパティは、従来のborderプロパティでは実現が困難だった、複雑な形状や独自のパターンを持つ視覚的な境界線を、要素に適用することを可能にします。具体的には、指定した画像を境界線のテンプレートとして使用し、その形状に合わせて要素の端を切り抜いたり、あるいは画像をタイルのように繰り返してパターン化された境界線を作成したりできます。

mask-borderは、mask-border-source（マスクの元となる画像）、mask-border-slice（マスク画像をどのように分割するか）、mask-border-width（マスク境界線の幅）、mask-border-outset（要素から境界線がどれだけ外側に描画されるか）、mask-border-repeat（マスク画像をどのように繰り返すか）、mask-border-mode（マスクの適用モード）といった、関連する複数の個別プロパティの値を一括で設定できるため、コードの記述を簡潔にし、メンテナンス性を向上させるメリットがあります。これにより、Webサイトやアプリケーションのデザインにおいて、標準的な枠にとどまらない、より表現豊かで創造的なユーザーインターフェースを構築する際に活用されます。

Copy
1mask-border: url('path/to/image.png') 30 / 15px round;

引数なし

引数はありません

戻り値なし

戻り値はありません