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-width/index.html | 129 +++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/ja/web/css/border-image-width/index.html (limited to 'files/ja/web/css/border-image-width') diff --git a/files/ja/web/css/border-image-width/index.html b/files/ja/web/css/border-image-width/index.html new file mode 100644 index 0000000000..35702b3958 --- /dev/null +++ b/files/ja/web/css/border-image-width/index.html @@ -0,0 +1,129 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。

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

このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

+ +

構文

+ +
/* キーワード値 */
+border-image-width: auto;
+
+/* <length> 値 */
+border-image-width: 1rem;
+
+/* <percentage> 値 */
+border-image-width: 25%;
+
+/* <number> 値 */
+border-image-width: 3;
+
+/* 上下 | 左右 */
+border-image-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

border-image-width プロパティは下記の値のリストにある1つから4つの値を使用して指定することができます。

+ + + +

値

+ +
+
<length-percentage>
+
境界の幅を、 {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の幅、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。
+
<number>
+
境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。
+
auto
+
境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。

+ +

+ +

そして、元の画像内のそれぞれの円は30×30ピクセルです。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 200, 240)}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ + + +

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

-- cgit v1.2.3-54-g00ecf