CSS による背景とボーダー — CSS Backgrounds and Borders Module Level 3

1.1. ~module間の相互作用

この~moduleは、 `CSS2$r の［ `§ 各種~border~prop＠~CSS22/box.html#border-properties$, `§ 背景＠~CSS22/colors.html#background$ ］にて定義された 背景と~borderの特能を，置換して拡張する。 ◎ This module replaces and extends the background and border features defined in [CSS2] sections 8.5 and 14.2.

この~moduleにおけるすべての~propは、 `first-letter$pe 疑似要素 `CSS2$r にも適用される。 ◎ All properties in this module apply to the ::first-letter pseudo-element.＼

1.2. 値~定義

【 この節の他の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$ に移譲。 】

…これらの値~型の定義は、 他の~CSS~moduleとの組合nで拡張され得る。 例えば， `CSS-IMAGES-3$r と組合せることで、 `background-image$p や `border-image$p の値として，~CSS~gradientを利用することも許容される。 ◎ … Combination with other CSS modules may expand the definitions of these value types. For example, combining with CSS Images allows for using CSS gradients as background-image or border-image values. [CSS-IMAGES-3]

【この訳に特有な表記規約】

“`example-property-*^p” や “`example-*-property^p” などの `*^c の入った表記は、［ 略式~prop `example-property^p, その下位~propたち ］の総称を表す。

2.1. 複数の背景~画像による多層化

~boxの背景は、 複数個の `背景~画像~層@ （ `background image layer^en ） を伴い得る。 層の個数は、 `background-image$p ~propに~~供された~commaで分離された値の個数から決定される。 値 `none^v に対しても，依然として層は作成されることに注意。 ◎ The background of a box can have multiple background image layers. The number of layers is determined by the number of comma-separated values in the background-image property. Note that a value of none still creates a layer.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

~listを成す最初の画像が利用者に最も近い`背景~画像~層$になり、 その次の画像が その背後に塗られる，等々となる。 背景~色も（もし在れば），他のすべての層の背後に塗られる。 ◎ The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.

注記： `border-image-*$p も、 背景になる画像を定義し得る。 それは， `background-*$p ~propから作成される背景~層より手前に塗られる。 ◎ Note: The border-image properties can also define a background image, which, if present, is painted on top of the background layers created by the background properties.

2.2. 下塗り色： `background-color^p ~prop

この~propは、 ~boxの `背景~色@ を設定する。 この色は、 どの背景~画像よりも背後に描かれる。 ◎ This property sets the background color of a box. This color is drawn behind any background images.

h1 { background-color: #F00 } /* 
背景を赤色に設定する。
◎
Sets background to red.
 */

`背景~色$の塗ng区画は、 `background-clip$p の［ 最も背後にある`背景~画像~層$に対応する`層~値$ ］に則って，外側が切取られる。 ◎ The background color is clipped according to the background-clip value associated with the bottom-most background image layer.

2.3. 画像~source： `background-image^p ~prop

この~propは、 要素の `背景~画像@ たちを指定する。 最初の`層~値$による画像が（利用者から見て）最も手前に描かれ、 後続な層~値による各~画像は，先行する層~値による画像の背後に描かれる。 ◎ This property specifies the background image(s) of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one.＼

この~prop用の`層~値$の構文は： ◎ The property’s value is given as a comma-separated list of <bg-image> values where

`bg-image@t
	= `image$t
	| `none$v

［ `background-image$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-image interacts with other comma-separated background properties to form each background image layer.

作者は，背景~画像を設定するときは、［ 画像が可用でないときでも， ~text色との~contrastは保全される ］よう， `background-color$p も指定するべきである。 ◎ When setting a background image, authors should also specify a background-color that will preserve contrast with the text for when the image is unavailable.

~accessibilityの理由から、 作者は，重要な情報を伝達する手法として背景~画像のみに頼るべきでない。 `~Web内容を~access可能にするための指針 F3＠~TR/2008/NOTE-WCAG20-TECHS-20081211/F3$ `WCAG20$r 【`日本語訳＠https://waic.jp/docs/NOTE-WCAG20-TECHS-20120103/F3.html$】 を見よ。 非~graphicな呈示の下では、 画像は~accessし得ない。 高~contrast表示~modeの下では、 背景~画像の表示が特定的にオフにされることもある。 ◎ For accessibility reasons, authors should not use background images as the sole method of conveying important information. See Web Content Accessibility Guideline F3 [WCAG20]. Images are not accessible in non-graphical presentations, and background images specifically might be turned off in high-contrast display modes.

注記： ~CSSにおいては、 `content$p ~propにより，前景~画像を~styleとして供せる。 意味論的に重要な前景~画像は、 文書~markup （例：~HTMLの `img^e ~tag） を通して供するべきである。 ◎ Note: Stylistic foreground images can be provided in CSS with the content property. Semantically-important foreground images should be provided in the document markup, e.g. with the <img> tag in HTML.

注記： `媒体~素片~識別子＠~TR/media-frags/#naming-space$を利用すれば、 画像を成すある部位に限って表示できる。 `CSS-IMAGES-3$r が［ 画像~形式~用の~fallback構文を供する／ 画像~表示~用に追加的な制御を含める ］ことになる。 ◎ Note: Media fragments can be used to display a portion of an image. The CSS Images module will provide fallback syntax for image formats and include additional controls for image display.

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

実装は、 可視でない画像 （例：全部的に不透明な他の画像の背後にあるもの） を［ ~downloadしない／描かない ］よう最適化してもよい。 ◎ Implementations may optimize by not downloading and drawing images that are not visible (e.g., because they are behind other, fully opaque images).

2.4. 画像の敷詰め法： `background-repeat^p ~prop

この~propは、 `背景~画像$が［ `~sizeされ＠#background-size$, `位置され＠#background-position$た後 ］における敷詰め法を指定する。 ◎ This property specifies how background images are tiled after they have been sized and positioned.＼

この~prop用の`層~値$の構文は： ◎ The property’s value is given as a comma-separated list of <repeat-style> values where

`repeat-style@t
	= `repeat-x$v
	| `repeat-y$v
	| [`repeat$v | `space$v | `round$v | `no-repeat$v]{1,2}

`repeat-style$t に~keywordが 1 個だけ指定された場合、 次の表tの 2 列目に与える値に算出される： ◎ Single values for <repeat-style> have the following meanings:

`repeat-style$t に算出された 2 個の~keyword値は、 順に，［ 横~軸, 縦~軸 ］に適用される — 次に従って： ◎ If a <repeat-style> value has two keywords, the first one applies to the horizontal axis, the second to the vertical one, as follows:

`repeat@v

`背景~画像$は、 当の方向に，`背景~塗ng区画$を覆い尽くすまで必要なだけ繰返される。 ◎ The image is repeated in this direction as often as needed to cover the background painting area.

`space@v

`背景~画像$は、 `背景~位置決め区画$に収まる限り，切取られずに繰返され、 最初と最後の画像が区画の両端に接するよう，均等に~~間隔が~~空けられる。 `背景~塗ng区画$が`背景~位置決め区画$より大きい場合、 `背景~塗ng区画$を埋めるまで~patternが繰返されることになる。 `background-position$p の対応する`層~値$は、 当の方向については，無視される — ただし，当の軸において画像 2 個分に足る空間がない場合、 画像は 1 個だけ配置され， `background-position$p が当の軸における画像の位置を決定する。 ◎ The image is repeated as often as will fit within the background positioning area without being clipped, and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of background-position for this direction is ignored unless there is not enough space for two copies of the image in this axis, in which case only one image is placed, and background-position determines its position in this axis.

`round@v

`背景~画像$は、 `背景~位置決め区画$に収まる限り，できるだけ多く繰返されるが、 整数個で埋尽くせない場合は，そうなるように拡縮し直される。 `background-size$p に示されている公式を見よ。 `背景~塗ng区画$が`背景~位置決め区画$より大きい場合、 `背景~塗ng区画$を埋尽くすまで~patternが繰返されることになる。 ◎ The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does. See the formula under background-size. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.

`no-repeat@v

`背景~画像$は、 1 度だけ配置され、 当の方向には繰返されない。 ◎ The image is placed once and not repeated in this direction.

2 個の~keywordが どちらも `no-repeat$v でない場合、 `背景~塗ng区画$の全体が敷詰められることになる — 縦または横に 1 本だけ帯状に伸ばされるのではなく。 ◎ Unless one of the two keywords is no-repeat, the whole background painting area will be tiled, i.e., not just one vertical strip and one horizontal strip.

body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

body {
  background-image: url(dot.png) white;
  background-repeat: space;
}

［ `background-repeat$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-repeat interacts with other comma-separated background properties to form each background image layer.

2.5. 画像の固着-法： `background-attachment^p ~prop

この~prop用の`層~値$の構文は： ◎ The property’s value is given as a comma-separated list of <attachment> keywords where

`attachment@t
	= `scroll$v
	| `fixed$v
	| `local$v

`fixed@v

`背景~画像$は`表示域$に固定される。 （表示域が無い）`~paged媒体$においては、 `~page~box$に固定され，したがって各~pageごとに再現される。 ◎ The background is fixed with regard to the viewport. In paged media where there is no viewport, a fixed background is fixed with respect to the page box and therefore replicated on every page.

注記： `表示域$は各~viewごとに 1 個に限られることに注意。 ~boxが［ `~scroll容器$であった【／`~scroll容器$の中にあった】 ］としても、 `fixed$v による背景は，［ 【~boxの内容／】~box ］と伴に移動することはない。 ◎ Note: There is only one viewport per view. Even if an box is a scroll container, a fixed background doesn’t move with the box.

`local@v

`背景~画像$は~boxの内容に固定される。 ~boxが~scroll用の仕組みを備えている【`~scroll容器$である】ならば、 背景は，~boxの内容と伴に~scrollする。 また，`背景~塗ng区画$と`背景~位置決め区画$は、 それらの枠を成す`~border区画$ではなく， ~boxの`~scroll可能な~overflow区画$に相対的になる。 `~scroll可能な~overflow区画$は`~border区画$を含まないので、 `~scroll容器$用には， `background-clip$p に対する値 `border-box$v は `padding-box$v と同じに扱ってもヨイ。 ◎ The background is fixed with regard to the box’s contents: if the box has a scrolling mechanism, the background scrolls with the box’s contents, and the background painting area and background positioning area are relative to the scrollable overflow area of the box rather than to the border framing them. Because the scrollable overflow area does not include the border area, for scroll containers the border-box value of background-clip may be treated the same as padding-box.

`scroll@v

`背景~画像$は，~box自身に固定され、 その内容と伴には~scrollしない（実質的に，~boxの~borderに留められる）。 ◎ The background is fixed with regard to the box itself and does not scroll with its contents. (It is effectively attached to the box’s border.)

画像が`表示域$（または`~page~box$）に固定されたとしても，それが可視になる部分は~boxの`背景~塗ng区画$に限られる。 他の場合は切取られない （そのような場合の挙動は，`§ 特別な要素の背景$を見よ）。 したがって，画像は、 敷詰められるのでない限り，不可視になり得る。 ◎ Even if the image is fixed, it is still only visible when it is in the background painting area of the box or otherwise unclipped. (See § 2.11 Backgrounds of Special Elements for the cases when background images are not clipped.) Thus, unless the image is tiled, it may be invisible.

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

注記： `fixed$v による背景を（例えば~hardware的な制限に因り）~supportしない~UAは、 ~keyword `fixed$v を伴う宣言を`無視-$することになる。 例えば： ◎ Note: User agents that do not support fixed backgrounds (for example due to limitations of the hardware platform) will ignore declarations with the keyword fixed. For example:

body {
  /* 
すべての~UA用：
◎
For all UAs:
 */
  background: white url(paper.png) scroll;
  /* 
背景も固定できる~UA用：
◎
For UAs that do fixed backgrounds:
 */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 
すべての~UA用：
◎
For all UAs:
 */
  background: silver;
  /* 
背景も固定できる~UA用：
◎
For UAs that do fixed backgrounds:
 */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

［ `background-attachment$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-attachment interacts with other comma-separated background properties to form each background image layer.

2.6. 画像の位置決め： `background-position^p ~prop

この~propは、 `背景~画像$たちが指定された場合には， 当の~boxの`背景~位置決め区画$の中での各~画像の（`~resize＠#background-size$後における）初期~位置を指定する。 ◎ If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.

この~prop用の`層~値$の構文は： ◎ The property’s value is given as a comma-separated list of <bg-position> values where

`bg-position@t
	= [ `left$v | `center$v | `right$v | `top$v | `bottom$v | `length-percentage$t ]
	| [ `left$v | `center$v | `right$v | `length-percentage$t ]
	  [ `top$v | `center$v | `bottom$v | `length-percentage$t ]
	| [ `center$v | [ `left$v | `right$v ] `length-percentage$t? ] &&
	  [ `center$v | [ `top$v | `bottom$v ] `length-percentage$t? ]

【 元々 `bg-position^t 型が包摂していた `position$t 型は， 各種~論理-~keywordもとり得るよう`拡張された＠~CSSVAL5#typedef-position$ので、 `bg-position^t 型もそれら追加的な~keywordをとり得るよう拡張されることになろう。 】

指定された値（ ~keyword ／ `length-percentage$t ）の個数に応じて： ◎ ↓

• 1 個の場合、 2 個目の値として `center$v が指定されたものと見做される。 ◎ If only one value is specified, the second value is assumed to be center.＼

• 2 個の場合、［ 1 個目／ 2 個目 ］の値に対する `length-percentage$t は，［ 横／縦 ］位置 — ［ 背景~画像の左上~隅 ］の［ `背景~位置決め区画$の左上~隅 ］からの~offset — を表現する。 ◎ If two values are given, a <length-percentage> as the first value represents the horizontal position (or offset) and a <length-percentage> as the second value represents the vertical position (or offset). The <length-percentage> values here represent an offset of the top left corner of the background image from the top left corner of the background positioning area.

  注記： 2 個の~keywordが成す~pairは，順序を入れ替え可能な一方、 ~keywordと［ 長さ／百分率 ］を組合せた場合は，そうでない。 したがって、 `center left^v は妥当であるが， `50% left^v は妥当でない。 ◎ Note: A pair of keywords can be reordered, while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not.

• 3 〜 4 個の場合、 各 `length-percentage$t は，~offsetを表現する — それらには，起点となる辺を指定する~keywordが先行していなければならない。 例えば `background-position^p: `bottom 10px right 20px^v は、［ 下辺から上へ `10px^v, 右辺から左へ `20px^v ］~offsetされた所を表現する。 ◎ If three or four values are given, then each <length-percentage> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, background-position: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge.＼
• 3 個の場合、 欠落~offsetは， 0 と見做される。 ◎ If three values are given, the missing offset is assumed to be zero.

［ 正な値／負な値 ］は、 `背景~位置決め区画$の辺から［ `内方^em／`外方^em ］への~offsetを表現する。 ◎ Positive values represent an offset inward from the edge of the background positioning area. Negative values represent an offset outward from the edge of the background positioning area.

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

`percentage$t

百分率~値による［ 横／縦 ］~offsetは、［ `背景~位置決め区画$の［ 横幅／縦幅 ］から `背景~画像$の［ 横幅／縦幅 ］を引いた結果 ］に相対的になる。 この画像の~sizeは、 `background-size$p により与えられる。 ◎ A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.

例えば， 値~pair `0% 0%^v に対しては、 画像の左上~隅が~box — 通例的には【すなわち， `background-origin$p により他が指定されない限り】、 当の~boxの`~padding~box$【！padding edge】 — の左上~隅に整列される。 値~pair `100% 100%^v に対しては、 画像の右下~隅が，~boxの右下~隅に整列される。 値~pair `75% 50%^v に対しては、 画像の左上~隅から［ 75% 右, 50% 下 ］の地点が，~boxの左上~隅から［ 75% 右, 50% 下 ］の地点に整列される（下図）。 ◎ For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.

`length$t

長さ値は、 固定された長さによる~offsetを与える。 例えば，値~pair `2cm 1cm^v に対しては、 画像は，その左上~隅が，`背景~位置決め区画$の左上~隅から［ 2cm 右, 1cm 下 ］の所に配置される。 ◎ A length value gives a fixed length as the offset. For example, with a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.

`top@v

2 個以下の値が与えられた下では、 縦~位置に対する `0%^v に算出される。 他の場合、 直後の~offset値の起点を上辺にする。 ◎ Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.

`right@v

2 個以下の値が与えられた下では、 横~位置に対する `100%^v に算出される。 他の場合、 直後の~offset値の起点を右辺にする。 ◎ Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.

`bottom@v

2 個以下の値が与えられた下では、 縦~位置に対する `100%^v に算出される。 他の場合、 直後の~offset値の起点を下辺にする。 ◎ Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.

`left@v

2 個以下の値が与えられた下では、 横~位置に対する `0%^v に算出される。 他の場合、 直後の~offset値の起点を左辺にする。 ◎ Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.

`center@v

横~位置が指定されていなければ，横~位置に対する `50%^v （すなわち `left 50%^v ）に算出され、 他の場合は，縦~位置に対する `50%^v （すなわち `top 50%^v ）に算出される。 ◎ Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px;

［ `background-position$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-position interacts with other comma-separated background properties to form each background image layer.

2.7. 塗ng区画： `background-clip^p ~prop

`背景~塗ng区画@ を決定する — 背景は、 この区画に塗られることになる。 ◎ Determines the background painting area, which determines the area within which the background is painted.＼

この~prop用の各種`層~値$の意味は： ◎ Values have the following meanings:

`border-box@v

背景は`~border~box$内に塗られる。 ◎ The background is painted within (clipped to) the border box.

`padding-box@v

背景は`~padding~box$内に塗られる。 ◎ The background is painted within (clipped to) the padding box.

`content-box@v

背景は`内容~box$内に塗られる。 ◎ The background is painted within (clipped to) the content box.

（いずれも、 ~boxの外側は切取られる。） ◎ ↑

注記： `根~要素$に対しては、 その`背景~塗ng区画$は異なるので， `background-clip$p ~propが指定されても効果は無い。 `§ 特別な要素の背景$を見よ。 ◎ Note: The root element has a different background painting area and thus the background-clip property has no effect when specified on it. See § 2.11 Backgrounds of Special Elements.

注記： 背景は常に、 ~border（もしあれば）の`背後^emに描かれる。 `CSS2$r `§ 積層~文脈の詳しい記述$を見よ。 ◎ Note: The background is always drawn behind the border, if any. See “Elaborate description of Stacking Contexts” in [CSS2] Appendix E.

`border-radius$p による`背景~塗ng区画$の形状への影響については、 `§ 隅の形状付け＠#corner-shaping$を見よ。 ◎ See § 4.2 Corner Shaping for how border-radius affects the shape of the background painting area.

［ `background-clip$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-clip interacts with other comma-separated background properties to form each background image layer.

2.8. 位置決め区画： `background-origin^p ~prop

この~propは、 `背景~位置決め区画@ を決定する — 各`背景~画像$は、 その中に位置される。 複数個の`~box断片$として描画される要素 （例： 複数~行lにまたがる`行内~box$／ 複数~pageにまたがる~box） 用には、 それらの`背景~位置決め区画$（たち）を決定するために，［ `box-decoration-break$p `CSS-BREAK-3$r が，以下に挙げる どの~boxに対し演算するか ］を指定する。 ◎ This property determines the background positioning area: the area within which any background images are positioned. For elements rendered as multiple box fragments (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes box-decoration-break [CSS-BREAK-3] operates on to determine the background positioning area(s).

この~prop用の各種`層~値$の意味は：

`padding-box@vO

画像~位置を`~padding~box$に相対的にする。 （~boxが断片化されない【！dor single boxes】なら、［ `0 0^v ／ `100% 100%^v ］が`~padding辺$の［ 左上~隅／右下~隅 ］に対応する。） ◎ The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)

`border-box@vO

画像~位置を`~border~box$に相対的にする。 ◎ The position is relative to the border box.

`content-box@vO

画像~位置を`内容~box$に相対的にする。 ◎ The position is relative to the content box.

この`背景~画像~層$に対応する［ `background-attachment$p の`層~値$ ］が `fixed$v の事例では、 この~propの効果は無い — `背景~位置決め区画$は、 `初期~包含塊$になる。 ◎ If the background-attachment value for this layer is fixed, then this property has no effect: in this case the background positioning area is the initial containing block.

注記： 当の要素の［ `background-clip$p は `padding-box$v, `background-origin$p は `border-box$vO, `background-position$p は `top left^v （初期~値）, `~border幅$は 0 でない ］場合、 `背景~画像$は，【`背景~位置決め区画$の】［ 上端, 左端 ］辺で切取られることになる。 ◎ Note: If background-clip is padding-box, background-origin is border-box, background-position is top left (the initial value), and the element has a non-zero border, then the top and left edges of the background image will be clipped.

［ `background-origin$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-origin interacts with other comma-separated background properties to form each background image layer.

2.9. 画像の~sizing： `background-size^p ~prop

この~propは、 各`背景~画像$の~sizeを指定する。 ◎ This property specifies the size of each background image.＼

この~prop用の`層~値$の構文は： ◎ The property’s value is given as a comma-separated list of <bg-size> values where

`bg-size@t
	= [ `length-percentage [0,∞]$t | `auto$v ]{1,2}
	| `cover$v
	| `contain$v

各種 値の意味は： ◎ Values have the following meanings:

`contain@v

画像を — `生来な縦横比$を有するならば，それを保全しつつ — その［ 横幅, 縦幅 ］を［ `背景~位置決め区画$の内側に収まる最~大な~size ］に拡縮する。 ◎ Scale the image, while preserving its natural aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

【 この~sizeは、［ `拘束~矩形$として`背景~位置決め区画$ ］を与える下で，`~contain拘束$として解決される。 】

`cover@v

画像を — `生来な縦横比$を有するならば，それを保全しつつ — その［ 横幅, 縦幅 ］を［ `背景~位置決め区画$を完全に覆う最~小な~size ］に拡縮する。 ◎ Scale the image, while preserving its natural aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

【 この~sizeは、［ `拘束~矩形$として`背景~位置決め区画$ ］を与える下で，`~cover拘束$として解決される。 】

[ `length-percentage [0,∞]$t | `auto@v ]{1,2}

2 個の成分~値は、 順に，画像の横幅, 縦幅を与える。 与えられた成分~値が 1 個だけの場合、 2 個目は `auto^v と見做される。 ◎ The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.

`percentage$t は、 `背景~位置決め区画$に相対的になる。 ◎ A <percentage> is relative to the background positioning area.

一方の次元に限り `auto^v 値の場合 ⇒＃ 画像は`生来な縦横比$を有するならば，それと他方の次元の~sizeを利用して解決される／ 画像は その次元において`生来な~size$を有するならば，それを利用する／ ~ELSE_ `100%^v と扱われる ◎ An auto value for one dimension is resolved by using the image’s natural aspect ratio and the size of the other dimension, or failing that, using the image’s natural size, or failing that, treating it as 100%.

両~次元とも `auto^v 値の場合 ⇒ 画像は，少なくとも一方の次元において`生来な~size$を有するならば，それ（それら）が利用されるべきであり、 欠落~次元は，前段落の `auto^v と同様に挙動する。 他の場合の~sizeは、 `contain$v と同様に決定される 【例：`生来な縦横比$しか無い~vector画像】 。 ◎ If both values are auto then the natural width and/or height of the image should be used, if any, the missing dimension (if any) behaving as auto as described above. If the image has neither natural size, its size is determined as for contain.

【 この~sizeは、［ `指定d~size$として所与の~size, `既定の~obj~size$として`背景~位置決め区画$ ］を与える下で，`既定の~sizing~algo$を利用して解決される。 】

負な値は妥当でない。 ◎ Negative values are invalid.

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box;
}

p {
  background-size: 15px 15px;
  background-image: url(tile.png);
}

body {
  background-size: auto;            /* 既定 */
  background-image: url(flower.png);
}

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30%;
}

ある次元において， `background-repeat$p が `round$v の場合、 ~UAは更に，上述による結果の画像~sizeを次に従って調整するモノトスル： ◎ If background-repeat is round for one (or both) dimensions, there is a second step. The UA must＼

1. `round$v にされた各~次元ごとに、 `背景~位置決め区画$を整数個の画像で埋尽くせるように拡縮する — 調整-後の結果は，次の式で与えられる ⇒ %W ~DIV `round^op( %W ~DIV %L )

   ここで：

   • %L は調整-前の［ 横幅／縦幅 ］（ ~NEQ 0 ）
   • %W は`背景~位置決め区画$の［ 横幅／縦幅 ］

   • `round^op( %X ) は %X に最も近い正な整数を返す関数

     【 %X の小数部が 0.5 の場合にどうなるかは、 述べられていない — ある種の言語における同じ名前の関数と同じ挙動が意図されているかもしれないが。 】

   ◎ scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area. In the case of the width (height is analogous): • If X ≠ 0 is the width of the image after step one and W is the width of the background positioning area, then the rounded width X' = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero).
2. 加えて，［ 一方の次元において `background-repeat$p が `round$v ］かつ［ 他方の次元において `background-size$p が `auto$v ］の場合、 画像を元の縦横比に戻すよう，他方の次元を拡縮する。 ◎ If background-repeat is round for one dimension only and if background-size is auto for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* 既定 */
  background-size: auto;             /* 既定 */
}

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* 既定 */
  background-size: 3em;              /* = '3em auto' */
}

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto;
}

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto;
}

div {
  background-image: url(image5.png);
  background-repeat: round;          /* = round round */
  background-size: auto 4em;
}

背景~画像の横幅または縦幅が 0 に解決される場合、 その画像は表示されなくなる（画像が透明であったときと同じ効果になる）。 ◎ If the background image’s width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)

［ `background-size$p と他の `background-*$p ］~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 2.1 Layering Multiple Background Images for how background-size interacts with other comma-separated background properties to form each background image layer.

2.10. 各種 `background-*^p ~prop用の略式： `background^p ~prop

`background$p ~propは、［ ~stylesheetにおける同じ場所で，ほとんどの `background-*$p ~propを一括して設定する ］ための`略式~prop$である。 ~commaで分離された各`層~値$が各`背景~画像~層$に対応し，その個数が層の個数になる。 宣言が妥当ならば、 この略式~propは，次を行う： ◎ The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background image layers. Given a valid declaration,＼

1. 次に挙げる各~prop %~prop に対し… ⇒＃ `background-image$p, `background-position$p, `background-size$p, `background-repeat$p, `background-origin$p, `background-clip$p, `background-attachment$p ◎終 …に対し ⇒ この~propの各`層~値$ %層~値 に対し ⇒ %~prop の対応する`層~値$を［ %層~値 に %~prop 用の値が明示的に指定されたならば，それ／ ~ELSE_ %~prop の`初期~値$ ］に設定する ◎ for each layer the shorthand first sets the corresponding value of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property’s initial value, then assigns any explicit values specified for this layer in the declaration.＼

2. `background-color$p ~propを［ `final-bg-layer$t にて それ用の値（ `background-color$tp ）が指定されたならば，それ／ ~ELSE_ ~propの`初期~値$ ］に設定する ◎ Finally background-color is set to the specified color, if any, else set to its initial value.

この~prop用の`層~値$の構文は （ `final-bg-layer^t は最後の`層~値$用）： ◎ This property’s value is given as a comma-separated list of values where

`bg-layer@t
	=  `bg-image$t
	|| `bg-position$t  [ / `bg-size$t  ]?
	|| `repeat-style$t
	|| `attachment$t
	|| `visual-box$t
	|| `visual-box$t

`final-bg-layer@t
	=  `bg-image$t
	|| `bg-position$t  [ / `bg-size$t  ]?
	|| `repeat-style$t
	|| `attachment$t
	|| `visual-box$t
	|| `visual-box$t
	|| `background-color$tp

注記： 背景~色（ `background-color$tp ）は、 `final-bg-layer$t 以外では，許可されない。 ◎ Note: A color is permitted in <final-bg-layer>, but not in <bg-layer>.

`層~値$を成す 2 個の `visual-box$t 値は、 順に［ `background-origin$p, `background-clip$p ］に対応する — `visual-box$t 値が 1 個しか与えられなかった場合、 その値を 2 個目の値も与えているものとして扱う。 ◎ If one <visual-box> value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.

body {
  background: red;
}
p {
  background: url("chess.png") 40% / 10em gray round fixed border-box;
}

body {
  background-color:      red;
  background-position:   0% 0%;
  background-size:       auto;
  background-repeat:     repeat;
  background-clip:       border-box;
  background-origin:     padding-box;
  background-attachment: scroll;
  background-image:      none;
}

p {
  background-color:      gray;
  background-position:   40% 50%;
  background-size:       10em auto;
  background-repeat:     round;
  background-clip:       border-box;
  background-origin:     border-box;
  background-attachment: fixed;
  background-image:      url(chess.png);
}

E {
  background: #CCC url("metal.jpg") top left / 100% auto no-repeat;
}

div { background: padding-box url(paper.jpg) white center }
div {
  background-color:      white;
  background-image:      url(paper.jpg);
  background-repeat:     repeat;
  background-attachment: scroll;
  background-position:   center;
  background-clip:       padding-box;
  background-origin:     padding-box;
  background-size:       auto auto;
}

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),   url(b.png),   url(c.png);
background-position:   top left,     center,       top left;
background-repeat:     no-repeat,    no-repeat,    repeat;
background-clip:       border-box,   border-box,   border-box;
background-origin:     padding-box,  padding-box,  padding-box;
background-size:       auto auto,    100% 100%,    auto auto;
background-attachment: scroll,       scroll,       scroll;
background-color:      white;

2.11. 特別な要素の背景

文書の`~canvas$は、 文書が描画される無限な平面である `CSS2$r 。 ~canvasに対応する要素は無いので、 ~canvasに対する~style付けを許容するため， `根~要素$（~HTMLの場合は `body$e 要素）の背景は以下に述べるとおり~canvasへ伝播される。 ただし，~canvasに利用される背景を与える要素の `display$p が `none^v の場合、 `~canvas背景$は透明になる。 ◎ The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below. However, if the element whose background would be used for the canvas is display: none, then the canvas background is transparent.

`~canvas背景$が不透明でない場合、 `~canvas表面@ が透けて示される。 `~canvas表面$の生地は、 ~UAに依存する （概して、不透明な白になるが）。 ◎ If the canvas background is not opaque, the canvas surface below it shows through. The texture of the canvas surface is UA-dependent (but is typically an opaque white).

<!DOCTYPE html【！ PUBLIC '-//W3C//DTD HTML 4.0//EN'】>
<html>
  <head>
    <title>Setting the canvas background</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>My background is marble.</p>
  </body>
</html>

3.1. 線の色： `border-*-color^p ~prop

これらの~propは、 `~border色@ — ［ `border-style$p ~propにより指定された~border ］の前景~色 — を設定する。 ◎ These properties set the foreground color of the border specified by the border-style properties.

`border-color$p は、 次に挙げる~propを単独の宣言で設定する`略式~prop$である ⇒＃ `border-top-color$p, `border-right-color$p, `border-bottom-color$p, `border-left-color$p ◎ The border-color property is a shorthand property for setting border-top-color, border-right-color, border-bottom-color, and border-left-color in a single declaration.

成分~値たちは、 これら各~側の下位propを`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

3.2. 線の~pattern： `border-*-style^p ~prop

これらの~propは、［ `~border$が現れるかどうか ］および［ 現れる（かつ`~border画像＠#border-images$で上書きされない）場合は， どの `~border~style@ で描かれるか ］を制御する。 ◎ These properties control whether a border appears, and if it does what style it’s drawn in (if it is not overridden by a border image).

`border-style$p ~propは、 次に挙げる~propを単独の宣言で設定する`略式~prop$である ⇒＃ `border-top-style$p, `border-right-style$p, `border-bottom-style$p, `border-left-style$p ◎ The border-style property is a shorthand property for setting border-top-style, border-right-style, border-bottom-style, and border-left-style in a single declaration.

成分~値たちは、 これら各~側の下位propを`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

その値の構文は： ◎ The style is specified as a <line-style> keyword, where

`line-style@t
	= `~noneLS$v
	| `hidden$v
	| `dotted$v
	| `dashed$v
	| `solid$v
	| `double$v
	| `groove$v
	| `ridge$v
	| `inset$v
	| `outset$v

各種 値の意味は： ◎ Values have the following meanings:

`~noneLS@v

~borderは無い。 ~borderの`色$bDと`幅$bDは無視される （すなわち，~borderの`幅$bDは 0 になる）。 その結果、［ `border-image-width$p の初期~値も 0 に解決される ］ようになることに注意。 ◎ No border. Color and width are ignored (i.e., the border has width 0). Note this means that the initial value of border-image-width will also resolve to zero.

`hidden@v

`~noneLS$v と同じ — ただし、 `border-collapse$p が `collapse^v にされた~table `CSS2$r に対しては，`~borderの競合-解決$の規則における挙動が異なる。 ◎ Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].

`dotted@v

点線 — 小丸の並び。 ◎ A series of round dots.

`dashed@v

端が角ばった破線。 ◎ A series of square-ended dashes.

`solid@v

一重の実線。 ◎ A single line segment.

`double@v

二重線。 各~線の太さは指定されないが、 全体的な太さは `border-width$p に等しくなるモノトスル。 ◎ Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

`groove@v

~canvasに彫られたかのような見かけ （この効果は、 概して，指定された `border-color$p より少し明るい線と暗い線で “影” を形成して得られる）。 ◎ Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the specified border-color.)

`ridge@v

~canvasから盛り上げられたかのような見かけ。 ◎ Looks as if it were coming out of the canvas.

`inset@v

~borderの内部が~canvasから凹んだかのような見かけ。 `~borderの縮約~model$ `CSS2$r においては `ridge$v として扱われる。 ◎ Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model. [CSS2]

`outset@v

~borderの内部が~canvasから盛り上げられたかのような見かけ。 `~borderの縮約~model$ `CSS2$r においては `groove$v として扱われる。 ◎ Looks as if the content on the inside of the border is raised out of the canvas. Treated as groove in the collapsing border model. [CSS2]

~borderは、 要素の背景の手前に描かれるが，（重合する所では）要素の内容の背後に描かれる。 ◎ Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps).

注記： 黒や白に近い~border色は、［ `groove$v ／ `ridge$v ／ `inset$v ／ `outset$v ］に要求される “立体” 効果を作成するためには，中間~色とは異なる色の計算が必要になる。 ◎ Note: Border colors close to black or white may need different color calculations than colors in between in order to create the required “3D” effect of groove, ridge, inset, or outset.

注記： ［ 点線を成す小丸の間隔 ］や［ 破線を成す各~線分の間隔や長さ ］を制御するすべは無い。 実装には、 隅の所で対称になるよう間隔を選ぶことが奨励される。 ◎ Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

注記： この仕様は、 `~style$bDが異なる 2 本の~borderの隅における継ぎ方を定義しない。 また，丸めた隅においては、 ~paddingが隅の半径より小さい場合，隅と内容が重合することもある。 ◎ Note: This specification does not define how borders of different styles should be joined in the corner. Also note that rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner.

3.3. 線の太さ： `border-*-width^p ~prop

これらの~propは、 `~border幅@ — `~border$の太さ — を設定する。 その構文は： ◎ These properties specify the thickness of the border, i.e. the border width. Where

`line-width@t
	= `length [0,∞]$t
	| `thin$v
	| `medium$v
	| `thick$v

負な値は妥当でない。 ~keyword［ `thin@v は `1px^v ／ `medium@v は `3px^v ／ `thick@v は `5px^v ］と等価になるとする。 ◎ Negative values are invalid. The thin, medium, and thick keywords are equivalent to 1px, 3px, and 5px, respectively.

`border-width$p ~propは、 次に挙げる~propを単独の宣言で設定する`略式~prop$である ⇒＃ `border-top-width$p, `border-right-width$p, `border-bottom-width$p, `border-left-width$p ◎ The border-width property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width, and border-left-width in a single declaration.

成分~値たちは、 これら各~側の下位propを`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

注記： `~border幅$の`初期~値$は `medium$v であるが、 【他が指定されない限り】その`使用~値$【！used initial width】は，`~border~style$の初期~値が `~noneLS$v なので `0^v になる。 ◎ Note: Although the initial width is medium, the initial style is none; therefore the used initial width is 0.

3.4. ~borderの各種 略式~prop

これらは、 順に，~boxの［ 上端, 右端, 下端, 左端 ］`~border$に対し，その［ `border-width$p, `border-color$p, `border-style$p ］を設定する`略式~prop$である。 値が省略された~propは、 各自の`初期~値$に設定される。 ◎ These shorthand properties set the border-width, border-color, and border-style of the top, right, bottom, and left borders of a box. Omitted values are set to their initial values.

`border$p ~propは、 ~boxの［ 上端, 右端, 下端, 左端 ］`~border$を すべて同じ［ `border-width$p, `border-color$p, `border-style$p ］に設定するための`略式~prop$である。 略式~prop `margin$p, `padding$p と違って、 `border$p ~propは、 これら各側の~borderに異なる値を設定できない — そのためには、 他の `border-*^p ~propを利用する必要がある。 ◎ The border property is a shorthand property for setting the same border-width, border-color, and border-style for all four borders of a box. Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

`border$p 略式~propは、 `border-image$p も その初期~値に設定し直す。 したがって，作者には、 【他は同じ優先度の】より前に現れている~border設定群を上書きする際に、 他の略式~propや個々の~propでなく，この略式~propを利用することが推奨される。 これにより，新たな~styleが~~反映されるように `border-image$p も設定し直される。 ◎ The border shorthand also resets border-image to its initial value. It is therefore recommended that authors use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade. This will ensure that border-image has also been reset to allow the new styles to take effect.

注記： ~CSS~WGは、 `border$p 略式~propを，~CSSの将来~levelにおいても，他のすべての `border-*^p ~propを設定し直すものと意図している。 仮に、 ~glyphによる~borderを許容する `border-characters^p ~propが導入されたなら， `border$p 略式~propは それも設定し直すことになる。 作者は， `border$p 略式~propを利用して~borderを設定し直せば、 将来にどの様な~propが導入されようとも， “白紙状態” に戻されることが保証される。 ◎ Note: The CSS Working Group intends for the border shorthand to reset all border properties in future levels of CSS as well. For example, if a border-characters property is introduced in the future to allow glyphs as borders, it will also be reset by the border shorthand. By using the border shorthand to reset borders, authors can be guaranteed a “blank canvas” no matter what properties are introduced in the future.

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

これらの~propは，機能が重複する部分があるので、 規則を指定する順序も重要になる。 ◎ Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.

blockquote {
  border-color: red;
  border-left: double;
  color: black;
}

4.1. 曲線~半径： `border-*-radius^p ~prop

`border-*-radius^p ~propの 2 個の `length-percentage$t 値は、 `~border半径@ — 順に，四分~楕円の［ 横, 縦 ］半径 — を定義することにより， `~border辺$の外縁の隅~形状（下の図式を見よ）を定義する。 2 個目の値が省略された場合、 1 個目の値から複製される。 どちらかの長さが 0 の場合、 隅は丸められず，直角になる。 ［ 横／縦 ］半径に対する百分率は，`~border~box$の［ 横幅／縦幅 ］に相対的になる。 ◎ The two <length-percentage> values of the border-*-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.＼

負な値は妥当でない。 ◎ Negative values are invalid.

div.standout {
  width: 13em;
  height: 8em;
  border: solid black 1em;
  border-radius: 7.5em 5em;
}

`border-radius$p 略式~propは、 4 隅すべての `border-*-radius^p ~propをまとめて設定する。 ~slashを挟んで値たちが与えられた場合、 ~slashの［ 前／後 ］にある値たちが［ 横／縦 ］半径を設定する。 ~slashが無い場合、 両~軸の半径を等しく設定する。 一連の値は、 各 隅の半径を，左上から — すなわち，［ 左上, 右上, 右下, 左下 ］を順に［ 上端, 右端, 下端, 左端 ］に対応付ける下で — `時計回りに設定する$。 ◎ The border-radius shorthand sets all four border-*-radius properties. If values are given before and after the slash, then the values before the slash set the horizontal radii and the values after the slash set the vertical radii. If there is no slash, then the values set the radii in both axes equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

4.2. 隅の形状付け

`~padding辺$（~borderの内縁）の半径は、 ~borderの外縁の半径から，対応する~borderの太さを引いたものになる。 この結果が負になる場合、 内縁の半径は 0 にされる （そのような場合、 ~borderの［ 内縁な曲線の中心, 外縁な曲線の中心 ］は，一致しなくなる）。 同様に、 `内容~辺$の半径は，`~padding辺$の半径から対応する`~padding$の太さを引いてから 0 以上に切り上げた結果になる。 よって、 連接している 2 本の~borderの太さが異なる隅では、 曲った領域における~borderと~paddingの太さは、 それらを補間することにより得られ，滑らかに遷移することになる。 ◎ The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero. (In such cases the center of the border’s inner curve might not coincide with that of its outer curve.) Likewise the content edge radius is the padding edge radius minus the corresponding padding, or if that is negative, zero. The border and padding thicknesses in the curved region are thus interpolated from the adjoining sides, and when two adjoining borders are of different thicknesses the corner will show a smooth transition between the thicker and thinner borders.

~border~style（ `solid$v, `dotted$v, `inset$v, 等々）は，何であれ、 ~borderの曲線をなぞる。 ◎ All border styles (solid, dotted, inset, etc.) follow the curve of the border.

p {
  width: 70px;
  height: 70px;
  border: solid 30px;
  border-color: orange orange silver silver;
  border-top-right-radius: 100%;
}

`~border辺$の外側にある`~margin辺$の各 隅の各 半径は、 `~border半径$ %R に，対応する~marginの太さ %w を加算して計算される。 ただし、 %R が小さいときには，隅をより角張らせる — すなわち，比率［ %r ＝ %R ~DIV %w ］が 1 より小さいときは， %w に［ 1 ~MINUS ( 1 ~MINUS %r )³ ］を乗算して調整する（丸まった隅から角張った隅への連続性を確保するため）。 ◎ The margin edge, being outside the border edge, calculates its radius by adding the corresponding margin thickness to each border radius. However, in order to create a sharper corner when the border radius is small (and thus ensure continuity between round and sharp corners), when the border radius is less than the margin, the margin is multiplied by the proportion 1 + (r-1)3, where r is the ratio of the border radius to the margin, in calculating the corner radii of the margin box shape.

【 ~marginの丸ngは、 `ある種の~layoutに効果を及ぼす＠#_margin-radius_$。 】

4.3. 隅における切取n法

`border-radius$p は，`~border画像$【！#border-image】には影響しないが、 塗ngや~eventの取扱いを［ `~border辺$／`~padding辺$／`内容~辺$ ］で切取るような他の効果は，当の辺に対応する曲線で切取るモノトスル。 例えば： ◎ Although border images are not affected by border-radius, other effects that clip painting or event handling to the border, padding, or content edge must clip to their respective curves. For example,＼

• 背景は、 `background-clip$p により指定された曲線で切取る。 ◎ backgrounds clip to the curve specified by background-clip,＼
• `overflow$p に対する `visible$v 以外の値は （ `overflow^p が両~軸とも `visible^v でないときは）、 曲った`~padding辺$で切取る。 ◎ overflow values other than visible to the curved padding edge (when overflow on both axes is not visible),＼
• `置換される要素$の内容は、 曲った`内容~辺$で切取る。 ◎ replaced element content to the curved content edge,＼
• ~pointer~eventは、 曲った`~border辺$で切取る。 ◎ pointer events to the curved border edge, etc.

注記： `border-radius$p は，要素とヤリトリありな面積を削減するので、 作者は，残りの面積が［ ~targetにする~platformに推奨される下限 ］に適合することを~~確保するべきである。 特に， `border-radius$p を利用するときは、 推奨される最小な~touch~target~sizeに適合するために，より大きい［ 横幅／縦幅 ］が要求され得る。 ◎ Note: As border-radius reduces the interactive area of an element authors should make sure the remaining interactive area conforms to recommended minima for the platforms they target; in particular, conforming to recommended minimum touch target sizes may require larger widths and heights when border-radius is used.

div {
  background: black;
  color: white;
  border-radius: 1em;
  padding: 1em;
}

4.4. ~borderの色と~styleの遷移

~borderにおいて［ `色$bD／`~style$bD ］が遷移する区間は、［ ~borderの両~半径, および内縁~曲線の中心 ］を包含する，最~小な矩形に入るモノトスル （いずれかの~border半径が対応する`~border幅$以下になる場合、 内縁な曲線は直角になり，中心は`~padding辺$の隅に来る）。 ◎ Color and style transitions must be contained within the segment of the border that intersects the smallest rectangle that contains both border radii as well as the center of the inner curve (which may be a point representing the corner of the padding edge, if the border radii are smaller than the border width).

隅で出会う~borderのうち一方の`幅$bDが 0 の場合、 他方の~borderが遷移区間の全体を占める。 他の場合、 これら連接している~borderの合間における［ `色$bD／`~style$bD ］に対する遷移の中点は，［ 連続的かつ単調な［ ２つの `border-*-width$p の比率 ］の関数 ］から得られる，曲線~上の一点に来る。 しかしながら、［ これらの遷移の外見／ この比率から曲線~上の点に対応付ける関数 ］は，定義されない。 ◎ If one of these borders is zero-width, then the other border takes up the entire transitional area. Otherwise, the center of color and style transitions between adjoining borders is a point along the curve that is a continuous monotonic function of the ratio of the border widths. However it is not defined what these transitions look like or what function maps from this ratio to a point on the curve.

4.5. 曲線が重合する場合

辺の両端にある 2 隅の合間で隣接する曲線は、 重合してはナラナイ： それらの曲線の~border半径の和が`~border~box$の~sizeを超過するときは、 ~UAは， 4 隅における~border半径の使用~値を［ そのどれもが重合しなくなる所まで，一様な倍率で削減する ］モノトスル。 そうするための~algoは： ◎ Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap. The algorithm for reducing radii is as follows:

注記： この公式は、 四分~円を四分~円のままに保ち，各 隅の半径たちの大小関係も保つが、 すでに十分~小さい半径も削減させ得るので， 同じ外見が保たれるべき~border【！？of nearby elements 】の外見も変え得る。 ◎ Note: This formula ensures that quarter circles remain quarter circles and large radii remain larger than smaller ones, but it may reduce corners that were already small enough, which may make borders of nearby elements that should look the same look different.

曲線が~scrollbarなどの~UI要素に干渉する場合、 ~UAは更に，影響される隅の半径に限り，その使用~値を必要な分だけ削減してもヨイ。 ◎ If the curve interferes with UI elements such as scrollbars, the UA may further reduce the used value of the affected border radii (and only the affected border radii) as much as necessary, but no more.

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

4.6. ~tableにおける効果

~tableにおいては、 その `border-collapse$p が： ◎ ↓

• `separate^v （~borderが分離される~mode）の場合 ⇒ `border-*-radius$p ~propは、［ `table$v ／ `inline-table$v ／ `table-cell$v ］~boxにも適用される。 ◎ The border-radius properties do apply to table, inline-table, and table-cell boxes in separated borders mode (border-collapse: separate).＼
• `collapse^v の場合 ⇒ `border-*-radius$p ~propの効果は無い。 ◎ When border-collapse is collapse, they have no effect.

5.1. ~border画像の~source： `border-image-source^p ~prop

`border-image-source$p ~propは、 `border-*-style$p により指定される描画に代えて `~border画像@ — ~borderとして利用する画像 — を指定する。 `border-image-slice$p に `fill$v ~keywordも与えられた場合、 要素~用の画像の後景も追加的に指定する。 値 `none@v をとる場合／ 画像を表示できない場合 （および，この~propを適用し得ない場合も）、 `~border~style$が利用されることになる。 他の場合、 `border-*-style$p による~borderは描かれず，この`~border画像$が — 以下の各~節に述べるとおり — 描かれることになる。 ◎ Specifies an image to use as a border in place of the rendering specified by the border-style properties and, if given the fill keyword in border-image-slice, as an additional image backdrop for the element. If the value is none or if the image cannot be displayed (or the property doesn’t apply), the border styles will be used; otherwise the element’s border-style borders are not drawn and this border image is drawn as described in the sections below.

5.2. ~border画像の切分け法： `border-image-slice^p ~prop

この~propは、 画像を［ 4 隅, 4 辺, 真中 ］の 9 片に分割するための［ 画像の各~辺から内方への~offset ］を指定する。 `fill$v ~keywordが無い場合、 真中の画像~片は破棄される（全部的に透明と扱われる）。 （これは、 背景の手前に描かれる — `§ ~border画像の描法$を見よ。） ◎ This property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the fill keyword is present. (It is drawn over the background; see Drawing the Border Image.)

（ `fill^v を除く）成分~値たちは、 これら各~側からの~offsetを`時計回りに設定する$。 【長さ値はとり得ないことに注意。】 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

`percentage [0,∞]$t

百分率による［ 横／縦 ］~offsetは、 画像の［ 横幅／縦幅 ］に相対的になる。 ◎ Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets.

`number [0,∞]$t

~raster画像においては、 画像~内の画素~数を表現する。 ~vector画像においては、 ~vector座標を表現する。 ◎ Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image).

`fill@v

この~keywordが在る場合、 真中の~border画像~片も保全される（既定では，破棄され, 空として扱われる）。 ◎ The fill keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)

負な値は妥当でない。 画像~sizeを超える算出d値は、 `100%^v として解釈される。 ◎ Negative values are invalid. Computed values larger than the size of the image are interpreted as 100%.

`border-image-slice$p により，互いに対辺にある画像~片は、 重合することもある。 左右~offset値の和が画像~全体の横幅~以上になる場合、［ 上辺, 真中, 下辺 ］画像は空になり，空でない透明な画像が指定されたときと同じ効果になる。 上下~offset値に対しても，縦横を入れ替えて同様になる。 ◎ The regions given by the border-image-slice values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty—which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

切分け~~位置を決定するために画像~sizeを要する場合（例えば，`生来な寸法$を伴わない~SVG画像）、 それは，［ `指定d~size$として拘束~無し, `既定の~obj~size$として`~border画像~区画$ ］を与える下で，`既定の~sizing~algo$を利用して~sizeされる。 ◎ If the image must be sized to determine the slices (for example, for SVG images with no natural dimensions), then it is sized using the default sizing algorithm with no specified size and the border image area as the default object size.

5.3. 描かれる区画： `border-image-width^p ~prop

`~border画像$は、 `~border画像~区画@ と呼ばれる区画に描かれる。 その境界は `border-image-outset$p から決定され、 既定では`~border~box$に一致する。 ◎ The border image is drawn inside an area called the border image area. This is an area whose boundaries by default correspond to the border box, see border-image-outset.

`border-image-width$p は、 `~border画像~区画$を 9 個の `~border画像~領域@ と称される領域に分割するための~offsetを指定する。 これらの~offsetは、［ 区画の各~辺から分割する線まで ］の内方への距離を表現する。 ◎ The four values of border-image-width specify offsets that are used to divide the border image area into nine regions.＼ The offsets represent inward distances from the top, right, bottom, and left sides of the area, respectively.

成分~値たちは、 これら各~側からの距離を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

各種 値の意味は： ◎ Values have the following meanings:

`length-percentage [0,∞]$t

百分率による［ 横／縦 ］~offsetは、 `~border画像~区画$の［ 横幅／縦幅 ］に相対的になる。 ◎ Percentages refer to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets.

`number [0,∞]$t

実数による~offsetは、 対応する `border-*-width$p の`算出d値$の何倍になるかを表現する。 ◎ Numbers represent multiples of the corresponding computed border-width.

`auto@v

`border-image-width$p の`使用~値$は、 対応する画像~片（ `border-image-slice$p を見よ）の`生来な~size$（横幅, 縦幅のうち適用-可能な方）になる。 要求される`生来な寸法$が当の画像には無い場合、 対応する `border-*-width$p の`算出d値$が代わりに利用される。 ◎ If auto is specified then the used border-image-width is the natural width or height (whichever is applicable) of the corresponding image slice (see border-image-slice). If the image does not have the required natural dimension then the corresponding computed border-width is used instead.

負な値は妥当でない。 ◎ Negative values are invalid for any border-image-width values.

`border-image-width$p の値を成す ある~offsetにより， 互いに対辺にある 2 つの辺~部位が重合する場合、 `border-image-width$p の`使用~値$は、 値を成す すべての~offsetを，重合しなくなる所まで一様な倍率で削減した結果になる — 数学的には、［［ 次の 2 つの値の最小 %f ］ ~LT 1 ］ならば，すべての~offsetに %f を乗算して削減した結果が`使用~値$になる ⇒＃ `~border画像~区画$の横幅 ~DIV ( 左側~offset ~PLUS 右側~offset ), `~border画像~区画$の縦幅 ~DIV ( 上側~offset ~PLUS 下側~offset ) ◎ If two opposite border-image-width offsets are large enough that they overlap, then the used values of all border-image-width offsets are proportionally reduced until they no longer overlap. In mathematical notation: Given Lwidth as the width of the border image area, Lheight as its height, and Wside as the border-image-width offset for the side side, let f = min(Lwidth/(Wleft+Wright), Lheight/(Wtop+Wbottom)). If f < 1, then all W are reduced by multiplying them by f.

5.4. 辺の張り出し量： `border-image-outset^p ~prop

`border-image-outset$p は、 `~border画像~区画$が`~border~box$を超えて拡張する量を指定する。 ◎ The values specify the amount by which the border image area extends beyond the border box.

成分~値たちは、 これら各~側から拡張する量を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

`length [0,∞]$t

指定された長さによる~outsetを表現する。 ◎ Represents an outset of the specified length.

`number [0,∞]$t

対応する `border-*-width$p の算出d値の，指定された倍数による~outsetを表現する。 ◎ Represents an outset of the specified multiple of the corresponding computed border-width.

負な値は妥当でない。 ◎ Negative values are invalid.

~border画像の［ `~border~box$の外側に描画される部分 ］は、 `~ink~overflow$であり，~scrollingが誘発されることはない。 その部分は、 ~mouse~event【および`~pointer~event＠~POINTEREVENTS$】からは不可視とされ， 当の要素~用に~eventを捕捉することはない。 ◎ Portions of the border-image that are rendered outside the border box are ink overflow and do not trigger scrolling. Also such portions are invisible to mouse events and do not capture such events on behalf of the element.

注記： 画像が~outset-されても，~scrollingは決して誘発されないが、 それでも，先祖や表示域の外側で切取られ得る。 ◎ Note: Even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport.

5.5. 画像の敷詰め法： `border-image-repeat^p ~prop

この~propは、 9 片に分割された`~border画像$を［ 各自に対応する`~border画像~領域$に，どう拡縮して敷詰めるか ］を指定する。 1 個目の~keywordは，［ 上辺, 真中, 下辺 ］用の画像~片に対する横方向の［ 拡縮-法／敷詰め法 ］に適用され、 2 個目の~keywordは，［ 左辺, 真中, 右辺 ］用の画像~片に対する縦方向の［ 拡縮-法／敷詰め法 ］に適用される — `§ ~border画像の描法$を見よ。 2 個目の~keywordが無い場合、 1 個目と同じと見做される。 各種 値の意味は： ◎ This property specifies how the images for the sides and the middle part of the border image are scaled and tiled. The first keyword applies to the horizontal scaling and tiling of the top, middle and bottom parts, the second to the vertical scaling and tiling of the left, middle and right parts; see Drawing the Border Image. If the second keyword is absent, it is assumed to be the same as the first. Values have the following meanings:

`stretch@vI

画像~片は、 対応する`~border画像~領域$を埋めるよう伸張される。 ◎ The image is stretched to fill its corresponding region.

`repeat@vI

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 ◎ The image is tiled (repeated) to fill its corresponding region.

`round@vI

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 整数個の~tileで埋尽くせないときは、 埋尽くせるよう画像~片は拡縮し直される。 ◎ The image is tiled (repeated) to fill its corresponding region. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.

`space@vI

画像~片は、 対応する`~border画像~領域$を埋めるよう敷詰められる（繰返される）。 整数個の~tileで埋尽くせないときは、 余った空間が~tileの周囲に分配される。 ◎ The image is tiled (repeated) to fill its corresponding region. If it does not fill the region with a whole number of tiles, the extra space is distributed around the tiles.

各~画像~片を対応する`~border画像~領域$へ［ 拡縮する, 敷詰める ］ための正確な処理は、 次~節にて与えられる。 ◎ The exact process for scaling and tiling the border-image parts is given in the section below.

5.6. ~border画像の描法

`~border画像$を `border-image-slice$p により切分けて得られた 9 片の画像は、 次の 4 段を経て，拡縮され, 位置されてから， 各自に対応する`~border画像~領域$ — 以下，この節では単に “領域” と称する — に敷詰められる： ◎ After the border image given by border-image-source is sliced by the border-image-slice values, the resulting nine images are scaled, positioned, and tiled into their corresponding border image regions in four steps:

1. `border-image-width$p に~~収まるように拡縮する： ◎ Scale to border-image-width.

   • ［ 上辺, 下辺 ］用の画像を拡縮する — その縦横比を保ちつつ，その縦幅が［ 対応する領域の縦幅 ］と同じになるよう。 ◎ The two images for the top and bottom edges are made as tall as the top and bottom border image regions, respectively, and their width is scaled proportionally.
   • ［ 左辺, 右辺 ］用の画像を拡縮する — その縦横比を保ちつつ，その横幅が［ 対応する領域の横幅 ］と同じになるよう。 ◎ The images for the left and right edges are made as wide as the left and right border image regions, respectively, and their height is scaled proportionally.
   • 各~隅~用の画像を拡縮する — その［ 横幅／縦幅 ］が，対応する領域の［ 縦／横 ］に隣接する領域の［ 横幅／縦幅 ］と同じになるよう。 ◎ The corner images are scaled to be as wide and as tall as the their respective border image regions.
   • 真中~用の画像の［ 横幅／縦幅 ］を［ 上辺／左辺 ］用の画像と同じ係数で拡縮する — ただし，係数が［ 0 または無限大 ］になる場合、［ 下辺／右辺 ］用の画像の拡縮ng係数で代用する。 それもできない場合、 拡縮しない。 ◎ The middle image’s width is scaled by the same factor as the top image unless that factor is zero or infinity, in which case the scaling factor of the bottom is substituted, and failing that, the width is not scaled. The height of the middle image is scaled by the same factor as the left image unless that factor is zero or infinity, in which case the scaling factor of the right image is substituted, and failing that, the height is not scaled.

2. `border-image-repeat$p に従って拡縮する： ◎ Scale to border-image-repeat.

   値を成す 1 個目の~keywordに応じて、 画像~片の横幅のみを次に従って拡縮する： ◎ ↓

   • `stretch$v ⇒ ［ 上辺, 真中, 下辺 ］用の画像を［ その横幅が真中~領域の横幅と同じになる ］よう拡縮する。 ◎ If the first keyword is stretch, the top, middle and bottom images are further scaled to be as wide as the middle region of the border image area. The height is not changed any further.
   • `round$v ⇒ ［ 上辺, 真中, 下辺 ］用の画像を［ その横幅の整数倍が真中~領域の横幅と同じになる ］ように拡縮する — `background-repeat$p ~propが `round$v をとるときと，ちょうど同じく。 ◎ If the first keyword is round, the top, middle and bottom images are resized in width, so that exactly a whole number of them fit in the middle region of the border image area, exactly as for round in the background-repeat property.
   • `repeat$v ／ `space$v ⇒ ［ 上辺, 真中, 下辺 ］用の画像には，手を加えない。 ◎ If the first keyword is repeat or space, the top, middle, and bottom images are not changed any further.
3. 値を成す 2 個目の~keywordに対しても、［ 左辺, 真中, 右辺 ］用の画像を — 前段と相似的に，横幅を縦幅に読み替える下で — 拡縮する。 ◎ The effects of stretch, round, repeat, and space for the second keyword are analogous, acting on the height of the left, middle and right images.

4. 最初の~tileを位置する： ◎ Position the first tile.

   • ［ 上辺, 真中, 下辺 ］用の画像を対応する領域に配置する — 1 個目の~keywordに応じて ⇒＃ `repeat$v ならば 横方向において中央~寄せに／ ~ELSE_ 左~寄せに ◎ If the first keyword is repeat, the top, middle, and bottom images are centered horizontally in their respective regions. Otherwise the images are placed at the left edge of their respective regions of the border image area.
   • ［ 左辺, 真中, 右辺 ］用の画像を対応する領域に配置する — 2 個目の~keywordに応じて ⇒＃ `repeat$v ならば 縦方向において中央~寄せに／ ~ELSE_ 上~寄せに ◎ If the second keyword is repeat, the left, middle, and right images are centered vertically in their respective regions. Otherwise the images are placed at the top edge of their respective regions of the border image area.

5. 敷詰めて描く： ◎ Tile and draw.

   • 各 画像~片を，各自に対応する領域を埋めるよう敷詰める。 ◎ The images are then tiled to fill their respective regions.
   • `space$v に対しては、 部分的に現れる~tileは すべて破棄し，余った空間を各~tileの周囲に均等に分配する — すなわち、［ 最初の~tileより前にある隙間, 最後の~tileより後にある隙間, 各~tileの合間にある隙間 ］を均等にする。 各~側を成す［ 隅, 辺 ］領域は空になることもある。 ◎ In the case of space, any partial tiles are discarded and the extra space distributed before, after, and between the tiles. (I.e. the gap before the first tile, the gap after the last tile, and the gaps between tiles are equalized.) This can result in empty border-image side regions.
   • 各 画像~片は、 通常の~borderと同じく，［ 同じ積層~levelの中で，背景~層の直ぐ手前にある層 ］に描く。 ◎ The images are drawn at the same stacking level as normal borders: immediately in front of the background layers.
   • `border-image-slice$p【！border-image-source】 に `fill$v が指定されていない場合、 真中~用の画像は描かない。 ◎ The middle image is not drawn unless fill was specified for border-image-source.

5.7. ~border画像： `border-image^p 略式~prop

これは、 次に挙げる~propを単独の宣言で設定する`略式~prop$である — 値が省略された~propは、 各自の`初期~値$に設定される ⇒＃ `border-image-source$p, `border-image-slice$p, `border-image-width$p, `border-image-outset$p, `border-image-repeat$p ◎ This is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat in a single declaration. Omitted values are set to their initial values.

5.8. ~tableに対する効果

`border-image-*$p は、［ `border-collapse$p が `collapse^v にされた［ ~table, 行内~table ］の~border ］にも適用される。 しかしながら，この仕様は、 その種の画像~borderをどう描画するかは，定義しない。 特に、 画像~borderと［ ~tableの各~辺に接する［ ~cell／~row／~row~group ］の~border ］が どう相互作用するかは，定義しない （ `CSS2$r による`~borderの競合-解決$を見よ）。 ◎ The border-image properties apply to the border of tables and inline tables that have border-collapse set to collapse. However, this specification does not define how such an image border is rendered. In particular, it does not define how the image border interacts with the borders of cells, rows and row groups at the edges of the table (see border conflict resolution in [CSS2]).

将来の仕様が，描画を定義するものと期待されている。 それまでは、 ~UAには，［ `border-collapse$p が `collapse^v にされた~table ］には~border画像を適用しないことが推奨される。 ◎ It is expected that a future specification will define the rendering. It is recommended that UAs do not apply border images to tables with collapsed borders until then.

6.1. 落影： `box-shadow^p ~prop

`box-shadow$p ~propは、 ~boxに 1 個以上の落影を付する。 ~propは、 `none$v または［ ~commaで分離された値たちが成す~list ］を受容する。 値 `none@v は、 影なしを指示する。 ~listは、 影たちを与え，~list順に手前から背後に重なる。 ◎ The box-shadow property attaches one or more drop shadows to the box. The property accepts either the none value, which indicates no shadows, or a comma-separated list of shadows, ordered front to back.

各 影は、 `shadow$t として与えられ，［ 2 〜 4 個の長さ値, 色（省略可能）, `inset^v ~keyword（省略可能） ］で表現される。 省略された長さ値は 0 になり， 省略された色は `currentcolor$v が既定になる。 ◎ Each shadow is given as a <shadow>, represented by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0; omitted colors default to currentColor.

`shadow@t
	= `color$t?
	&& [`length$t{2} `length [0,∞]$t? `length$t?]
	&& `inset^v?

`shadow$t を成す各~成分は、 次に従って解釈される： ◎ The components of each <shadow> are interpreted as follows:

1 個目の `length$t ◎ 1st <length>

描かれる影の ~boxからの `横~offset@ を指定する。 ［ 正な値は右／負な値は左 ］へ~offsetする。 ◎ Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.

2 個目の `length$t ◎ 2nd <length>

描かれる影の ~boxからの `縦~offset@ を指定する。 ［ 正な値は下／負な値は上 ］へ~offsetする。 ◎ Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.

3 個目の `length [0,∞]$t ◎ 3rd <length [0,∞]>

影の `ボカシ半径@ を指定する。 負な値は妥当でない。 値が 0 は影の輪郭をくっきりさせ、 値を大きいほど，ボカされる。 `§ 影のボカシ法＠#shadow-blur$を見よ。 ◎ Specifies the blur radius. Negative values are invalid. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred. See Shadow Blurring, below.

4 個目の `length$t ◎ 4th <length>

影の `拡幅~距離@ を指定する。 ［ 正な値／負な値 ］は、 指定された距離だけ，縦横とも影を［ 拡げる／狭める ］。 `§ 影の形状＠#shadow-shape$を見よ。 ◎ Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. See Shadow Shape, below.

【 この距離が両側の総和を表すのか片側の拡幅を表すのか，はっきりしないが、［ § 影の形状 に示される例／実装の挙動 ］は，片側の拡幅を示唆している。 】

注記： `内影$に対し，影を拡げる（面積を増やす）ことは、 影でない領域 — すなわち，~boxの内側~領域の投影 — の形状を狭めることを意味する。 ◎ Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape.

`color$t

影の色を指定する。 与えられなかった場合、 `currentcolor$v が既定になる。 ◎ Specifies the color of the shadow. If the color is absent, it defaults to currentColor.

`inset^v

この~keywordが与えられた場合、 落影は， `外影@ （~boxが手前に浮かんでいるかのように，~canvas上に影を~~落とす） から `内影@ （~boxが背後に沈んでいるかのように，~canvas上に影を~~落とす） に変更される。 ◎ If present, the inset keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

width: 100px;
height: 100px;
border: 12px solid blue;
background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px  0px  8px rgba(0,0,0,0.4) inset;

border:5px solid blue;
background-color:orange;
width: 144px;
height: 144px;
border-radius: 20px;

box-shadow:
  rgba(0,0,0,0.4)
  10px 10px;

box-shadow:
  rgba(0,0,0,0.4)
  10px 10px
  inset

box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* 拡幅 */

box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* 拡幅 */
  inset