From 366a8015ac69893836aaf4f56e24bee041ad2471 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 01:04:30 +0900 Subject: border-image 関連のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-image-outset/index.html | 112 ------------------------ files/ja/web/css/border-image-outset/index.md | 112 ++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 112 deletions(-) delete mode 100644 files/ja/web/css/border-image-outset/index.html create mode 100644 files/ja/web/css/border-image-outset/index.md (limited to 'files/ja/web/css/border-image-outset') diff --git a/files/ja/web/css/border-image-outset/index.html b/files/ja/web/css/border-image-outset/index.html deleted file mode 100644 index 5a917812d7..0000000000 --- a/files/ja/web/css/border-image-outset/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-image-outset -slug: Web/CSS/border-image-outset -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-image -translation_of: Web/CSS/border-image-outset ---- -
{{CSSRef}}
- -

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

- -

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

- -
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
- - - -

構文

- -
/* <length> 値 */
-border-image-outset: 1rem;
-
-/* <number> 値 */
-border-image-outset: 1.5;
-
-/* 上下 | 左右 */
-border-image-outset: 1 1.2;
-
-/* 上 | 左右 | 下 */
-border-image-outset: 30px 2 45px;
-
-/* 上 | 右 | 下 | 左 */
-border-image-outset: 7px 12px 14px 5px;
-
-/* グローバル値 */
-border-image-outset: inherit;
-border-image-outset: initial;
-border-image-outset: unset;
-
- -

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

- -
    -
  1. 値が1つ指定された場合は、全4辺に適用されます。
    2. -
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
    3. -
  3. 値が3つ指定された場合は、1つ目が上に、2つ目が左右に、3つ目が下に適用されます。
    4. -
  4. 値が4つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
    5. -
- -

値

- -
-
{{cssxref("<length>")}}
-
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
-
{{cssxref("<number>")}}
-
border-image がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset は 2em 4px 0 3rem として計算されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="outset">This element has an outset border image!</div>
-
- -

CSS

- -
#outset {
-  width: 10rem;
-  background: #cef;
-  border: 1.4rem solid;
-  border-image: radial-gradient(#ff2, #55f) 40;
-  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
-  margin: 2.1rem;
-}
- -

結果

- -

{{EmbedLiveSample("Example", "auto", 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.border-image-outset")}}

diff --git a/files/ja/web/css/border-image-outset/index.md b/files/ja/web/css/border-image-outset/index.md new file mode 100644 index 0000000000..5a917812d7 --- /dev/null +++ b/files/ja/web/css/border-image-outset/index.md @@ -0,0 +1,112 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

+ +

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

+ +
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+border-image-outset: 1rem;
+
+/* <number> 値 */
+border-image-outset: 1.5;
+
+/* 上下 | 左右 */
+border-image-outset: 1 1.2;
+
+/* 上 | 左右 | 下 */
+border-image-outset: 30px 2 45px;
+
+/* 上 | 右 | 下 | 左 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* グローバル値 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+
+ +

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

+ +
    +
  1. 値が1つ指定された場合は、全4辺に適用されます。
    2. +
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
    3. +
  3. 値が3つ指定された場合は、1つ目が上に、2つ目が左右に、3つ目が下に適用されます。
    4. +
  4. 値が4つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
    5. +
+ +

値

+ +
+
{{cssxref("<length>")}}
+
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
+
{{cssxref("<number>")}}
+
border-image がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset は 2em 4px 0 3rem として計算されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="outset">This element has an outset border image!</div>
+
+ +

CSS

+ +
#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", "auto", 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.border-image-outset")}}

-- cgit v1.2.3-54-g00ecf