このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
mask-border-outset
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
構文
css
/* <length> 値 */mask-border-outset: 1rem;/* <number> 値 */mask-border-outset: 1.5;/* 上下 | 左右 */mask-border-outset: 1 1.2;/* 上 | 左右 | 下 */mask-border-outset: 30px 2 45px;/* 上 | 右 | 下 | 左 */mask-border-outset: 7px 12px 14px 5px;/* グローバル値 */mask-border-outset: inherit;mask-border-outset: initial;mask-border-outset: revert;mask-border-outset: revert-layer;mask-border-outset: unset;mask-border-outset プロパティは 1 ～ 4 つの値で指定します。それぞれの値は<length> または<number> です。負の値は無効です。
- 位置が1 つ指定された場合、全 4 辺に同じ距離が適用されます。
- 位置が2 つ指定された場合、1 つ目の距離は上下に、2 つ目は左右に適用されます。
- 位置が3 つ指定された場合、1 つ目の距離はを上に、2 つ目は左右に、3 つ目は下に適用されます。
- 位置が4 つ指定された場合、上、右、下、左の順 (時計回り) で適用されます。
値
<length>マスク境界の辺からの距離を長さで表します。
<number>マスク境界の辺からの距離を、対応する
border-widthの倍数で表します。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | すべての要素。 SVG の場合は<defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 離散値 |
形式文法
mask-border-outset =
[<length>|<number>]{1,4}
例
基本的な使用
このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。
css
mask-border-outset: 1rem;Chromium ベースのブラウザーは、このプロパティの古い版 —mask-box-image-outset — に接頭辞つきで対応しています。
css
-webkit-mask-box-image-outset: 1rem;メモ:mask-border ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-border-outset |