From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/border-image-outset/index.html | 114 ++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 files/ja/web/css/border-image-outset/index.html (limited to 'files/ja/web/css/border-image-outset/index.html') diff --git a/files/ja/web/css/border-image-outset/index.html b/files/ja/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..2ae454522e --- /dev/null +++ b/files/ja/web/css/border-image-outset/index.html @@ -0,0 +1,114 @@ +--- +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