mask-border-width
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Syntax
/* キーワード値 */
mask-border-width: auto;
/* <length> 値 */
mask-border-width: 1rem;
/* <percentage> 値 */
mask-border-width: 25%;
/* <number> 値 */
mask-border-width: 3;
/* 上下 | 左右 */
mask-border-width: 2em 3em;
/* 上 | 左右 | 下 */
mask-border-width: 5% 15% 10%;
/* 上 | 右 | 下 | 左 */
mask-border-width: 5% 2em 10% auto;
/* グローバル値 */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: unset;
mask-border-width
プロパティは、以下の値のリストの中から1~4つの値を使って指定することができます。
- 値が1つ指定された場合、全四辺に同じマージンが適用される。
- 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
- 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
- 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
値
<length-percentage>
- マスク境界の幅を、
<length>
または<percentage>
で指定します。パーセント値は左右のオフセットについては境界領域の幅に対する相対値、上下のオフセットについては境界領域の高さに対する相対値です。負の数であってはなりません。 <number>
- マスク境界の幅を、対応する
border-width
の倍数で指定します。負の数であってはなりません。 auto
- マスク境界の幅は、対応する
mask-border-slice
の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応するborder-width
が代わりに使用されます。
形式文法
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 mask-border-width の定義 |
勧告候補 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
継承 | なし |
パーセント値 | 境界マスク画像領域の幅/高さに対する相対値 |
計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
アニメーションの種類 | 離散値 |
ブラウザーの対応
TBD