From ea197b97a285a7f4fb51f252ac25ad8a5d6482c8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 1 Oct 2021 00:02:42 +0900 Subject: 変換の準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/mask-border-source/index.html | 73 ---------------------- files/ja/web/css/mask-border-source/index.md | 86 ++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 73 deletions(-) delete mode 100644 files/ja/web/css/mask-border-source/index.html create mode 100644 files/ja/web/css/mask-border-source/index.md (limited to 'files/ja/web/css/mask-border-source') diff --git a/files/ja/web/css/mask-border-source/index.html b/files/ja/web/css/mask-border-source/index.html deleted file mode 100644 index f9490dcbe8..0000000000 --- a/files/ja/web/css/mask-border-source/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: mask-border-source -slug: Web/CSS/mask-border-source -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-source ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSSmask-border-source プロパティは、要素のマスク境界を生成するのに使われる元の画像を設定します。

- -

{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。

- -

構文

- -
/* Keyword 値 */
-mask-border-source: none;
-
-/* <image> 値 */
-mask-border-source: url(image.jpg);
-mask-border-source: linear-gradient(to top, red, yellow);
-
-/* グローバル値 */
-mask-border-source: inherit;
-mask-border-source: initial;
-mask-border-source: unset;
-
- -

- -
-
none
-
マスク境界は使用されません。
-
{{cssxref("<image>")}}
-
マスク境界に使用する画像への参照です。
-
- -

形式文法

- -{{csssyntax}} - -

- -

例については {{cssxref("mask-border")}} をご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}{{Spec2("CSS Masks")}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

TBD

diff --git a/files/ja/web/css/mask-border-source/index.md b/files/ja/web/css/mask-border-source/index.md new file mode 100644 index 0000000000..4363af2925 --- /dev/null +++ b/files/ja/web/css/mask-border-source/index.md @@ -0,0 +1,86 @@ +--- +title: mask-border-source +slug: Web/CSS/mask-border-source +tags: + - CSS + - CSS Masking + - CSS プロパティ + - Experimental + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-source +translation_of: Web/CSS/mask-border-source +--- +{{CSSRef}} + +**`mask-border-source`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)を生成するのに使われる元の画像を設定します。 + +{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。 + +## 構文 + +```css +/* Keyword 値 */ +mask-border-source: none; + +/* 値 */ +mask-border-source: url(image.jpg); +mask-border-source: linear-gradient(to top, red, yellow); + +/* グローバル値 */ +mask-border-source: inherit; +mask-border-source: initial; +mask-border-source: revert; +mask-border-source: unset; +``` + +### 値 + +- `none` + - : マスク境界は使用されません。 +- {{cssxref("<image>")}} + - : マスク境界に使用する画像への参照です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### Basic usage + +This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask. + +```css +mask-border-source: url(image.jpg); +``` + +Chromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix: + +```css +-webkit-mask-box-image-source: url(image.jpg); +``` + +> **Note:** The [`mask-border`](/ja/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-width")}} -- cgit v1.2.3-54-g00ecf