mask-origin
は CSS のプロパティで、マスクの基準位置を設定します。
/* キーワード値 */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
/* 複数の値 */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;
/* 標準外のキーワード値 */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;
/* グローバル値 */
mask-origin: inherit;
mask-origin: initial;
mask-origin: unset;
単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは mask-image
CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために box-decoration-break
がどのボックスに作用するかを指定します。
初期値 | border-box |
---|---|
適用対象 | すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
構文
1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。
値
content-box
- 位置がコンテンツボックスからの相対位置になります。
padding-box
- 位置がパディングボックスからの相対位置になります。単純なボックスでは
0 0
がパディング境界の左上隅で、100% 100%
は右下隅です。 border-box
- 位置が境界ボックスからの相対位置になります。
margin-box
- 位置がマージンボックスからの相対位置になります。
fill-box
- 位置がオブジェクトの囲みボックスからの相対位置になります。
stroke-box
- 位置が輪郭線ボックスからの相対位置になります。
view-box
- 直近の SVG ビューポートを参照ボックスとして使用します。
viewBox
属性が SVG ビューポートを作成している要素に指定されると、参照ボックスはviewBox
属性で示された座標系の原点に配置され、参照ボックスの寸法はviewBox
属性の幅と高さに設定されます。 content
content-box
と同じです。padding
padding-box
と同じです。border
border-box
と同じです。
形式文法
<geometry-box>#where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
例
CSS
#masked {
width: 100px;
height: 100px;
margin: 10px;
border: 10px solid blue;
background-color: #8cffa0;
padding: 10px;
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
mask-origin: border-box; /* Can be changed in the live sample */
}
HTML
JavaScript
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 mask-origin の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。