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

mask-border-sliceプロパティは、要素のマスクボーダー画像をどのようにスライス（分割）するかを定義するプロパティです。このプロパティは、主にmask-border-imageプロパティで指定された画像を対象に作用し、その画像を9つの領域に分割するための基準点を設定します。

具体的には、画像の上下左右からのオフセット値を指定することで、マスクボーダーとして使用する部分を決定します。これらのオフセット値は、単位なしの数値（画像のピクセル値を直接示す）または画像の幅や高さに対するパーセンテージで指定することが可能です。例えば、30と指定した場合、画像の上端から30ピクセル、右端から30ピクセル、下端から30ピクセル、左端から30ピクセルの位置でスライスされます。複数の値を指定することで、それぞれの辺に対して異なるオフセットを設定することもできます。

画像が9つの領域に分割されると、四隅の領域はそのままのサイズと位置で保持されます。一方、側面の中央の領域は、要素の境界線の長さに合わせて自動的に伸縮されるか、または繰り返されて配置されます。中央の領域は、通常は破棄され、マスクの対象外となります。

このmask-border-sliceプロパティを使用することで、複雑なデザインを持つ画像を、要素のサイズが変わっても自然に見えるように、柔軟なマスクボーダーとして適用することが可能になります。特に、角の部分は固定しつつ、辺の部分は要素の大きさに合わせて伸び縮みさせたい場合に非常に有効です。mask-border-imageと合わせて、マスクボーダーの見た目を細かく制御するために利用されます。

Copy
1mask-border-slice: 30;

引数なし

引数はありません

戻り値なし

戻り値はありません