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

mask-border-repeatプロパティは、CSSのmask-border機能において、mask-border-sourceプロパティで指定された画像が要素の境界に沿ってどのように繰り返されるか、または伸縮されるかを制御するプロパティです。このプロパティは、画像を使って要素のマスク境界を装飾する際に、画像の表示方法を細かく調整するために使用されます。

具体的には、マスク画像のコーナー（角）部分、サイド（側面）部分、そして中央部分が、それぞれどのようなパターンで配置されるかを決定します。これにより、マスクとして使用する画像が、境界線にぴったりと収まるように伸縮されるのか、元のサイズで繰り返し並べられるのか、あるいは画像のサイズを微調整して隙間なく並べられるのかなどを指定できます。

このプロパティに設定できる主な値には、次のものがあります。

• stretch: マスク画像を伸縮させて、指定された境界領域全体に広げます。
• repeat: マスク画像を元のサイズで繰り返し並べます。画像の一部が領域からはみ出す場合は切り取られます。
• round: マスク画像を繰り返し並べますが、画像サイズをわずかに調整することで、きっちりと境界領域内に収まるようにします。
• space: マスク画像を繰り返し並べますが、画像間に均等なスペースを挿入することで、境界領域内にきっちりと収まるようにします。

これらの値を単独で指定すると、水平方向と垂直方向の両方に同じ繰り返し方が適用されます。また、2つの値を指定することで、1つ目の値が水平方向、2つ目の値が垂直方向の繰り返し方を個別に制御することも可能です。

mask-border-repeatプロパティを適切に利用することで、画像を用いたマスク境界のデザインにおいて、柔軟かつ複雑な視覚表現を効率的に実現することができます。ウェブページの装飾やUI要素のデザインにおいて、画像を意図した通りに配置するために重要な役割を果たすプロパティです。

Copy
1mask-border-repeat: stretch;

引数なし

引数はありません

戻り値なし

戻り値はありません