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

mask-border-widthプロパティは、要素の境界線に画像マスクを適用する際の、マスクの表示幅を保持するプロパティです。これは、画像で要素の境界線を装飾するmask-border機能の一部として、その画像境界線の太さを設定するために使用されます。

指定できる値は主に三種類です。一つ目は<length>で、pxやemなどの単位で具体的な長さを設定します。これにより、画像マスクの幅をピクセル数などで細かく制御できます。二つ目は<percentage>で、要素自身の幅や高さに対する割合をパーセンテージで指定します。これにより、要素のサイズに応じて幅を伸縮させられます。三つ目はキーワードautoで、この値を指定すると、ブラウザが自動的に最適な幅を計算して適用します。

このプロパティは、CSSのborder-widthプロパティと同様に、一つから四つの値を指定できます。一つの値を指定した場合は、全ての辺（上、右、下、左）に同じ幅が適用されます。二つの値を指定した場合は、一つ目の値が上下の辺に、二つ目の値が左右の辺に適用されます。三つの値を指定した場合は、一つ目の値が上の辺に、二つ目の値が左右の辺に、三つ目の値が下の辺に適用されます。そして、四つの値を指定すると、上、右、下、左の各辺に個別の幅を設定可能です。

mask-border-widthは、画像マスクの切り取り範囲を定義するmask-border-sliceプロパティと組み合わせて使用されることが一般的です。これにより、切り取られた画像が実際に表示される幅が決定され、ウェブページに多様な視覚表現を持つ画像境界線を適用できます。

Copy
1mask-border-width: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません