CSS による背景と境界線 — CSS Backgrounds and Borders Module Level 3

2.1. ~module間の相互作用

この~moduleは、 `CSS2$r の［ §各種~border~prop, §背景 ］にて定義された 背景と~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 疑似要素にも適用される。 `background-*$p ／ `border-*-radius$p ~propは、 `first-line$pe 疑似要素に適用される。 ~UAは、 `border-image-*$p や `box-shadow$p ~propを `first-line$pe 疑似要素に適用してもよい（要求-はされない）が， `border-*-color/style/width^p ~propを `first-line$pe に適用してはならない。 `CSS2$r ◎ All properties in this module apply to the ::first-letter pseudo-element. The background properties and border-radius properties also apply to the ::first-line pseudo-element. The UA may (but is not required to) apply the border-image or box-shadow properties to ::first-line. The UA must not apply the border-color/style/width properties to ::first-line. [CSS2]

2.2. 値~型

`image@t 値~型は、 `image$t = `uri^t として，この仕様にて定義される。 ◎ The <image> value type is defined by this specification as <image> = <uri>. …

【 `uri^t はおそらく `url$t を指す。 】【 以下、この節の内容はCSS 日本語訳 共通ページに委譲 】

2.3. 値の~animation

~CSSは、~style間の遷移を~animateさせる方法を含ませるものと期待されている（ CSS Transitions module `CSS3-TRANSITIONS$r の §~animate可能な~prop値~型 が、［ 異なる種類の値が遷移の間に補間される方法 ］を定義するものと期待されている）。 その先取りとして、この~moduleは，各~propの定義表に “~animation” 欄を含ませ，その~propの値が［ ~animateし得るかどうか, および その方法 ］についても指定する。 【この仕様における “~animation” 欄の “不可” は、おそらく，`離散的$を意味する。】 ◎ It is expected that CSS will include ways to animate transitions between styles. (The section “Animation of property types” of the CSS Transitions module [CSS3-TRANSITIONS] is expected to define how different kinds of values are interpolated during a transition.) In anticipation of that, this module includes a line “Animatable” for each property, which specifies whether and how values of the property can be animated.

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

CSS3 においては、~boxの背景は，複数の `層@ （ layer ）を持ち得る。 層の枚数は、 `background-image$p ~propに~~供された~comma区切りの値の個数から決定される。 値 `none^v に対しても，依然として 層は作成されることに注意。 ◎ The background of a box can have multiple layers in CSS3. 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(grass1.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 that the border-image properties can also define a background image, which, if present, is painted on top of the background created by the background properties.

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

【 `算出色@ （ computed color ） — 明文化されていないが、おそらく， CSS Color Module Level 4 にて定義される 色~値の解決-法 に従って得られる算出値を意味するであろう。 】

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

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

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

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

この~propは、要素の（何枚かの）背景~画像を設定する。 最初の`層値$による画像が（利用者から見て）最も手前に描かれ，後続する層値による各 画像は 先行する層値による画像の背後に描かれる。 ここで： ◎ This property sets 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. Where

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

値 `none@v は、 1 枚の画像~層として数えられつつ，何も描かない。 画像として機能しないものも、同様に 1 層に数えられつつ，何も描かない — 例えば、画像が［ 空（横幅または縦幅が 0 ）／ ~downloadに失敗した ／ 表示できない（形式が未~support） ］ときなど。 ◎ A value of none counts as an image layer but draws nothing. An image that is empty (zero width or zero height), that fails to download, or that cannot be displayed (e.g., because it is not in a supported image format) likewise counts as a layer but draws nothing.

`background-image$p と他の `background-*$p ~propの各 `層値$から，背景~画像~層がどの様に形成されるかについては、`複数の背景~画像による多層化$を見よ。 ◎ See the section “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 `WCAG20$r を見よ。 ~graphic的でない呈示の下では，画像は~accessし得ず、また，高~contrast表示モード下では，背景~画像の表示が特別にオフにされることもある。 ◎ 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 that 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.)

注記： 画像の一部分を取り出して表示させる用途に， 媒体~素片識別子 を利用できる。 CSS Images ~moduleが、画像~形式~用の~fallback構文を供し，画像~表示~用に追加の制御を含めることになる。 ◎ 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.

body { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }

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

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

背景~画像が，~sizeされ, 位置された後の，敷詰め法を指定する。 ここで： ◎ Specifies how background images are tiled after they have been sized and positioned. Where

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

`repeat-style$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 is for the horizontal direction, the second for the vertical one, as follows:

`repeat@v

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

`space@v

画像は、`背景~位置決め区画$に収まる限り，切取られずに繰返された上で、最初と最後の画像が区画の両端に接するように，均等に~~間隔が~~空けられる。 `背景~塗り区画$が`背景~位置決め区画$より大きければ、`背景~塗り区画$を埋めるまで~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 direction, in which case only one image is placed and background-position determines its position in this direction.

`round@v

画像は`背景~位置決め区画$に収まる限り，できるだけ多く繰返されるが、整数枚で埋め尽くせない場合は，そうなるように拡縮し直される。 `background-size$p に示されている公式を見よ。 `背景~塗り区画$が`背景~位置決め区画$より大きければ、`背景~塗り区画$を埋め尽くすまで~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 でない，ならば、`背景~塗り区画$の全体が敷詰められることになる — 縦または横に 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 the section “Layering multiple background images” for how background-repeat interacts with other comma-separated background properties to form each background image layer.

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

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

`fixed@v

背景は表示域に固定される。 （表示域を持たない）頁d媒体においては、`頁~box$に固定され，したがって毎~頁ごとに再現される。 表示域は各~viewにつき 1 個に限られることに注意。 要素が~scroll用の仕組み（ `overflow$p ~prop `CSS2$r を見よ）を備えていたとしても、 `fixed$v による背景は，要素と伴に移動することはない。 ◎ 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. Note that there is only one viewport per view. Even if an element has a scrolling mechanism (see the overflow property [CSS2]), a fixed background doesn’t move with the element.

`local@v

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

`scroll@v

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

画像が表示域（または頁~box）に固定されたとしても，それが可視になる部分は要素の`背景~塗り区画$に限られる。 他の場合は切取られない（そのような場合の挙動は，`特別な要素の背景$に）。 したがって，画像は、敷詰められるのでない限り，不可視になり得る。 ◎ Even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped. (See “The 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 を伴う宣言を無視するべきである。 例えば： ◎ User agents that do not support fixed backgrounds (for example due to limitations of the hardware platform) should 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 the section “Layering multiple background images” for how background-attachment interacts with other comma-separated background properties to form each background image layer.

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

この~propは、何枚かの背景~画像が指定されている下で，各 画像の，対応する`背景~位置決め区画$における（~resize後の）初期~位置を指定する。 ◎ If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.

ここで： ◎ 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? ]
]

• 値が 1 個だけ指定された下では、 2 個目の値は `center$v と見做される。 ◎ If only one value is specified, the second value is assumed to be center.＼

• 1 〜 2 個の値が与えられた下での［ 1 個目／ 2 個目 ］の値に対する `length-percentage$t は、［ 横／縦 ］の位置（または~offset）を表現する。 ここでの `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.

  注記： ~keywordによる~pairは順不同である一方、~keywordと［ 長さ／百分率 ］の組合せでは，順序は入れ替えられない。 したがって、 `center left^v は妥当であるが， `50% left^v は無効になる。 ◎ Note that 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された所を表現する。 値が 3 個の場合の未指定の~offsetは、 0 と見做される。 ◎ 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. If three values are given, the missing offset is assumed to be zero.

値の［ 正／負 ］は、`背景~位置決め区画$の辺から［ 内方／外方 ］への~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 に対しては、画像の左上~隅が，通例は（ `background-origin$p を特に指定しない限り） ~boxの~padding辺による区画の左上~隅に揃えられる。 値~pair `100% 100%^v に対しては、画像の右下~隅が，区画の右下~隅に揃えられる。 値~pair `75% 50%^v に対しては、［ 画像の左上~隅から 75% 右, 50% 下の地点 ］が，［ 区画の左上~隅から 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.

`bg-pos^dgm

`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

1 〜 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

1 〜 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

1 〜 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

1 〜 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 the section “Layering multiple background images” for how background-position interacts with other comma-separated background properties to form each background image layer.

3.7. 塗り区画： `background-clip^p ~prop

背景が塗られる区画となる `背景~塗り区画@ を決定する。 `層値$の構文は次で与えられる： ◎ Determines the background painting area, which determines the area within which the background is painted. The syntax of the property is given with

`box@t = `border-box$v | `padding-box$v | `content-box$v

各種 値の意味は： ◎ 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の外側は切取られる。） ◎ ↑

注記： 根~要素については、異なる`背景~塗り区画$を持つので， `background-clip$p ~propの効果はない。 `特別な要素の背景$を見よ。 ◎ Note that the root element has a different background painting area, and thus the background-clip property has no effect when specified on it. See “The backgrounds of special elements.”

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

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

`background-clip$p と他の `background-*$p ~propの各 `層値$から，背景~画像~層がどの様に形成されるかについては、`複数の背景~画像による多層化$を見よ。 ◎ See the section “Layering multiple background images” for how background-clip interacts with other comma-separated background properties to form each background image layer.

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

単独の~boxとして描画される要素に対しては、その `背景~位置決め区画@ を指定する。 複数の~boxとして描画される要素（例えば，複数~行0に渡るときの各 行0の行内~boxや, 複数~頁に渡るときの各 頁の~box）に対しては、 `box-decoration-break$p `CSS3-BREAK$r が，対象になる~boxを指定し，それらの`背景~位置決め区画$を決定する。 ◎ For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes box-decoration-break [CSS3-BREAK] operates on to determine the background positioning area(s).

`padding-box@vO

画像~位置を~padding~boxに相対的にする（~boxが 1 つだけなら［ `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は効果を持たず，`背景~位置決め区画$は `初期~包含塊$ `CSS2$r になる。 ◎ If the background-attachment value for this image is fixed, then this property has no effect: in this case the background positioning area is the initial containing block [CSS2].

注記： ［ `background-clip$p が `padding-box$v, `background-origin$p が `border-box$vO, `background-position$p が `top left^v （初期値） ］で, 要素の~border線幅は 0 でない場合、背景~画像の［ 上側, 左側 ］の部分が切取られることになる。 ◎ Note that 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 of the background image will be clipped.

`background-origin$p と他の `background-*$p ~propの各 `層値$から，背景~画像~層がどの様に形成されるかについては、`複数の背景~画像による多層化$を見よ。 ◎ See the section “Layering multiple background images” for how background-origin interacts with other comma-separated background properties to form each background image layer.

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

一連の背景~画像の~sizeを指定する。 ここで： ◎ Specifies the size of the background images. Where

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

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

`contain@v

画像を — その内在~縦横比があれば, それを保全しつつ — その横幅と縦幅の両者とも`背景~位置決め区画$に収まり切るような，最大~sizeに拡縮する。 ◎ Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

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

`cover@v

画像を — その内在~縦横比があれば, それを保全しつつ — その横幅と縦幅の両者とも`背景~位置決め区画$を覆い切るような，最小~sizeに拡縮する。 ◎ Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

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

[ `length-percentage$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.

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

一方の次元のみ `auto^v 値の場合、画像の内在~縦横比と他方の次元の~sizeを用いて解決されるが、それに失敗した場合は、 `100%^v と見なされる。 ◎ An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.

2 値とも `auto^v 値の場合、画像の内在［ 横幅または縦幅 ］があれば，それが利用されるべきであり、未指定の次元があれば，前段落の `auto^v と同様に挙動するが、画像が内在［ 横幅, 縦幅 ］いずれも持たない場合の~sizeは、 `contain$v と同様に決定される。 ◎ If both values are auto then the intrinsic 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 an intrinsic width nor an intrinsic height, its size is determined as for contain.

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

どの成分値にも，負の値は許容されない。 ◎ Negative values are not allowed.

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;
}

para {
    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を次のように調整し~MUST： ◎ If background-repeat is round for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that＼

1. 当該の次元において、`背景~位置決め区画$を整数枚の画像で埋め尽くせる様に，拡縮する — %L を調整-前の横幅（または縦幅）（ ≠ 0 ）， %W を `背景~位置決め区画$の横幅（または縦幅）とするとき、調整-後の結果は，次の式で与えられる ⇒ %W ÷ ［［ %W ÷ %L ］に最も近い正~整数 ］ ◎ 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 the section “Layering multiple background images” for how background-size interacts with other comma-separated background properties to form each background image layer.

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

ここで： ◎ Where

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

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

注記： 背景~色（ `background-color$tp ）は、 `final-bg-layer$t （最後の背景~層）においてのみ許可される。 ◎ Note that a color is permitted in <final-bg-layer>, but not in <bg-layer>.

`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 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 ◎ for each layer the shorthand first sets the corresponding layer 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に対しては、 `background-color$tp が指定されていれば その色をあてがい，他の場合は 初期値をあてがう。 ◎ Finally background-color is set to the specified color, if any, else set to its initial value.
3. 各 `層値$の中の 2 個の `box$t 値は，順に［ `background-origin$p, `background-clip$p ］に対応する。 ただし，~~供された `box$t 値が 1 個だけの場合、その値を 2 個目の値にも利用する。 ◎ If one <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;

3.11. 特別な要素の背景

文書の~canvasは，文書が描画される無限の平面である `CSS2$r 。 ~canvasに対応する要素は存在しないので、~canvasに対する~style付けを可能にするため、~CSSでは，根~要素（ HTML の場合は `body^e 要素）の背景を以下に述べる様に~canvasに伝播させる。 ［ ~canvasに利用される背景に利用される要素 ］に対する~boxが生成されない場合（例えば，根~要素の `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 no boxes are generated for the element whose background would be used for the canvas (for example, if the root element has display: none), then the canvas background is transparent.

注記： 不可視の要素でも，~boxを生成し得る。 例えば，要素の `visibility^p が `hidden^v で `display$p は `none^v でない場合、その~boxは 生成され，その背景が~canvasに利用される。 ◎ Note that an element might be invisible, but still generate boxes. For example, if the element has visibility: hidden but not display: none, boxes are generated for it and its background is used for the canvas.

~canvas背景が不透明でない場合に見えるものは UA に依存する。 ◎ If the canvas background is not opaque, what shows through is UA-dependent.

<!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>

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

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

`border-color$p は、他の `border-*-color^p ~propに対応する略式~propである。 一連の成分値は、~borderの各 側の線色を`時計回りに設定する$。 ◎ Border-color is a shorthand for the four border-*-color properties. The four values set the top, right, bottom and left border, respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.

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

これらの~propは、~borderが現れるかどうか, および 現れる（かつ, `~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 は、他の `border-*-style^p ~propに対応する略式~propである。 一連の成分値は、~borderの各 側の線styleを`時計回りに設定する$。 ◎ Border-style is a shorthand for the other four. Its four values set the top, right, bottom and left border respectively. A missing left is the same as right, a missing bottom is the same as top, and a missing right is also the same as top.

ここで： ◎ 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の線幅 は 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 に等しく~MUST。 ◎ 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 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 coming 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による 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.

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

これらの~propは、~borderの太さを設定する。 ここで： ◎ These properties set the thickness of the border. Where

`line-width@t = `length$t | `thin$v | `medium$v | `thick$v

値［ `thin@v ／ `medium@v ／ `thick@v ］に対応する長さは指定されないが、~UAは，これらの値による長さ（太さ）を［ `文書$を通して一定に保ち, かつ［ `thin$v ~LTE `medium$v ~LTE `thick$v ］が満たされる ］ようにするものとする。 ~UAは例えば、太さを `font-size^p ~prop用の `medium$v 値に依存させることもできる — その値が `17px^v 以下になるときは、順に［ `1px^v, `3px^v, `5px^v ］にするなど。 `length$t に対する負の値は無効である。 ◎ The lengths corresponding to thin, medium, and thick are not specified, but the values are constant throughout a document and thin ≤ medium ≤ thick. A UA could, e.g., make the thickness depend on the medium font size: one choice might be 1, 3 & 5px when the medium font size is 17px or less. Negative <length> values are not allowed.

`border-width$p は、他の `border-*-width^p ~propを設定する略式~propである。 一連の成分値は、~borderの各 側の線幅を`時計回りに設定する$。 ◎ Border-width is a shorthand that sets the four border-*-width properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

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

4.4. ~borderの各種 略式~prop

これらは、~boxの上右下左~borderの［ 線幅, 線style, 線色 ］を設定するための略式~propである。 省略された値は、それぞれの初期値に設定される。 ◎ This is a shorthand property for setting the width, style, and color of the top, right, bottom, and left border of a box. Omitted values are set to their initial values.

`border$p ~propは、~boxの~borderの 4 辺すべてを同じ［ 線幅, 線style, 線色 ］に設定するための略式~propである。 略式~prop `margin$p, `padding$p と異なり、 `border$p ~propは、 ~borderの 4 辺それぞれに異なる値を設定できない。 そのためには、他の `border-*^p ~propを利用する必要がある。 ◎ The border property is a shorthand property for setting the same width, color, and 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 Working Group は、 `border$p 略式~propを，~CSSの将来~levelにおいても，他のすべての `border-*^p ~propを再設定するものと意図している。 仮に、~glyphによる~borderを許容する `border-characters^p ~propが導入されたなら， `border$p 略式~propは それも再設定することになる。 作者は，~borderの再設定-に `border$p 略式~propを用いれば、将来にどの様な~propが導入されようとも， “白紙状態” に戻されることが保証される。 ◎ 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;
}

5.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 not allowed.

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 radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii 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-radius: 4em;

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

border-radius: 2em 1em 4em / 0.5em 3em;

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;

5.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 its center might not coincide with that of the outer border 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辺の各 隅の各 半径は、対応する~marginの太さ %w を`~border半径$ %R に加えて計算される。 ただし、 %R が小さいときには，隅をより角張らせる — すなわち，比率［ %r ＝ %R ÷ %w ］が 1 より小さいときは， %w に［ 1 − ( 1 − %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.

5.3. 隅による切取り

（ `border-image$p とは別に） ~boxの背景は、（ `background-clip$p により決定される）適切な曲線で外側が切取られる。 ［ ~border／~padding ］辺で切取られる他の効果（ `overflow$p が `visible$v でない下での，~overflowする内容など）も，その曲線で切取られ~MUST。 その場合、`置換される要素$の内容も，常に内容~辺の曲線で刈り取られる。 ◎ A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by background-clip). Other effects that clip to the border or padding edge (such as overflow other than visible) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve.

また、~border辺の曲線の外側は，要素のための~pointer~eventを受容しない。 ◎ Also, the area outside the curve of the border edge does not accept pointer events on behalf of the element.

注記： `border-radius$p は要素と対話-可能な面積を削減するので、作者は，残りの面積が目的の~platformに推奨される下限に適合することを~~確保すべきである。 特に、 `border-radius$p が利用されるとき，推奨される最小 touch target ~sizeに適合するためには、より大きい横幅や縦幅が要求され得る。 ◎ 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;
}

5.4. 線色と線styleの遷移

~borderにおいて［ 色／~style ］が遷移する区間は、［ ~borderの両~半径, および内縁~曲線の中心 ］を包含するような，~~最小の矩形に入ら~MUST（中心は、いずれかの~border半径が対応する `border-*-width$p より小さい場合，~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のうち一方の線幅が 0 の場合、他方の~borderが遷移区間の全体を占める。 他の場合、連接する~borderの合間の［ 色／~style ］遷移の中点は，［ 連続的かつ単調な，［ ２つの `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.

5.5. 曲線が重合する場合

隣接する 2 隅の曲線は、重合しては~MUST_NOT： 隣接する 2 隅の~border半径の和が`~border~box$の~sizeを超過するときには、~UAは， 4 隅における~border半径の使用値を，そのどれもが重合しなくなるまで 一様な倍率で減量し~MUST。 半径を減量するための~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の外見も変え得る。 ◎ Note that 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

5.6. ~tableにおける効果

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

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

［ `border-*-style$p で与えられる~border~style ］による描画の代わりに利用する画像を指定し、 `border-image-slice$p に `fill$v ~keywordも~~供されている場合には，要素に対する追加の後景~画像も指定する。 値が `none@v, または画像を表示できない（または~propが適用されない）場合，~border~styleが利用され、そうでなければ，~border~styleによる~borderは描かれず，以下の節に述べるように~border画像が描かれることになる。 ◎ Specifies an image to use 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 the border image is drawn as described in the sections below.

6.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.)

一連の成分値は、各 側の~offsetを`時計回りに設定する$。 各~offsetがとり得る各種 値は、次の意味を持つ 【長さ値はとり得ないことに注意】： ◎ When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

`percentage$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$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を超える算出値は `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を要する場合（例えば，`内在~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 intrinsic size), then it is sized using the default sizing algorithm with no specified size and the border image area as the default object size.

6.3. 描ng区画： `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 片に分割するための，各 辺からの~offsetを指定する。 一連の成分値は、区画の各 辺から分割-線までの距離を`時計回りに設定する$。 ◎ The four values of border-image-width specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. If the left width is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top. Values have the following meanings:

各 成分がとり得る各種 値の意味は： ◎ ↓

`length-percentage$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$t

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

`auto@v

`auto$v が指定された場合、`~border画像~区画$の辺~部位の線幅は，対応する画像~片（ `border-image-slice$p を見よ）の内在［ 横幅／縦幅 ］（いずれか適用-可能な方）になる。 画像が必要な`内在~寸法$を持たない場合、対応する `border-*-width$p の算出値が代わりに利用される。 ◎ If auto is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see border-image-slice). If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.

どの成分値にも，負の値は許容されない。 ◎ Negative values are not allowed for any border-image-width values.

ある~offset値により，互いに対辺にある 2 つの辺~部位が重合する場合、 `border-image-width$p の使用値は、値を成す すべての~offset値を，重合しなくなるまで一様な倍率で減量した結果になる — 数学的には、［［ 次の 2 つの値の最小~値 %f ］ ~LT 1 ］ならば，すべての~offset値に %f を乗算して減量した結果が使用値になる ⇒＃ `~border画像~区画$の横幅 ÷ ( 左側~offset + 右側~offset ), `~border画像~区画$の縦幅 ÷ ( 上側~offset + 下側~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.

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

`~border画像~区画$が`~border~box$を超えて拡張する量を指定する。 一連の成分値は、~borderの各 辺から区画の各 辺への~outsetを`時計回りに設定する$。 ◎ The values specify the amount by which the border image area extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

`length$t

指定された長さによる~outsetを表現する。 負の値は無効。 ◎ Represents an outset of the specified length. Negative values are invalid.

`number$t

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

~border画像の［ `~border~box$の外側に描画される部分 ］から~scrollingが誘発されることはない。 その部分は、~mouse~eventにおいては無いものと見なされ，当該~要素のために~eventを捕捉することもない。 ◎ Portions of the border-image that are rendered outside the border box 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 that, even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport.

6.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

画像~片は 対応する部位を埋める様に伸張される。 ◎ The image is stretched to fill the area.

`repeat@vI

画像~片は 対応する部位を埋める様に敷詰められる（繰返される）。 ◎ The image is tiled (repeated) to fill the area.

`round@vI

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

`space@vI

画像~片は 対応する部位を埋める様に敷詰められる（繰返される）。 整数枚の~tileで埋め尽くせないときは、余った空間が~tileの周囲に配分される。 ◎ The image is tiled (repeated) to fill the area. If it does not fill the area 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.

6.6. ~border画像の描法

`border-image-source$p が~~供する~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 area parts, respectively, and their width is scaled proportionally.

     ［ 左辺, 右辺 ］画像を、その縦横比率を保ちつつ，その横幅が［ 対応する部位の横幅 ］と同じになるように，拡縮する。 ◎ The images for the left and right edge are made as wide as the left and right border image area parts, respectively, and their height is scaled proportionally.

   • 各 隅~画像を、その［ 横幅／縦幅 ］が，対応する部位の［ 縦／横 ］に隣接する部位の［ 横幅／縦幅 ］と同じになるように，拡縮する。 ◎ The corner images are scaled to be as wide and as tall as the two border-image edges they are part of.
   • 真中~画像の［ 横幅／縦幅 ］を，［ 上辺／左辺 ］画像と同じ係数で拡縮する。 ただし、係数が 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.

   値の最初の~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 part 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 part 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.

   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.

3. 敷詰めの最初の~tile位置を決める： ◎ Position the first tile.

   • 1 個目の~keywordが `repeat$v の場合、［ 上辺, 真中, 下辺 ］画像を，対応する部位の中で 横方向において中央~寄せに置く。 他の場合、左~寄せに置く。 ◎ If the first keyword is repeat, the top, middle, and bottom images are centered horizontally in their respective areas. Otherwise the images are placed at the left edge of their respective parts of the border-image area.
   • 2 個目の~keywordが `repeat$v の場合、［ 左辺, 真中, 右辺 ］画像を，対応する部位の中で 縦方向において中央~寄せに置く。 他の場合、上~寄せに置く。 ◎ If the second keyword is repeat, the left, middle, and right images are centered vertically in their respective areas. Otherwise the images are placed at the top edge of their respective parts of the border-image area.

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

   • 各 画像~片を、それぞれに対応する部位を埋める様に敷詰める。 ◎ The images are then tiled to fill their respective areas.
   • `space$v に対しては、部分的に現れる~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 areas.
   • 画像は，通常の~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 に `fill$v が指定されていない場合、真中の画像は描かない。 ◎ The middle image is not drawn unless fill was specified for border-image-source.

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

これは、［ `border-image-source$p, `border-image-slice$p, `border-image-width$p, `border-image-outset$p, `border-image-repeat$p ］を設定するための略式~propである。 値が省略されたものは、その初期値に設定される。 ◎ This is a shorthand property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. Omitted values are set to their initial values.

6.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.

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

`box-shadow$p ~propは、~boxに 1 個以上の落影を付与する。 ~propは、影なしを指示する値 `none@v, または いくつかの影を与える［ ~comma区切りの値 ］~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.

各 影は，［ 2 〜 4 個の長さ値, 色 （省略可）, `inset^v ~keyword（省略可） ］で表現される `shadow$t として与えられる。 省略された長さ値は 0 にされ，色が省略された場合の既定は `color^p ~propの値にされる。 ◎ 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 the value of the color property.

`shadow@t = `color$t? && `length$t{2,4} && `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$t ◎ 3rd <length>

影の `ボカシ半径@ を指定する。 負の値は許容されない。 値 0 は 影の輪郭をくっきりさせ、値を大きくする程，ボカされる。 §影のボカシ法を見よ。 ◎ Specifies the blur radius. Negative values are not allowed. 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>

影の `拡幅~距離@ を指定する。 ［ 正／負 ］の値は、指定された距離だけ, 縦横とも影を［ 拡げる／狭める ］。 §影の形状を見よ。 ◎ 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

影の色を指定する。 色が不在の場合の使用~色は `color^p ~propから取り出される。 ◎ Specifies the color of the shadow. If the color is absent, the used color is taken from the color property.

`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^v;
height: `100px^v;
border: `12px solid blue^v;
background-color: `orange^v;
border-top-left-radius: `60px 90px^v;
border-bottom-right-radius: `60px 90px^v;
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

8.1. 用語集

次に挙げる語が、適合性の定義に用いられる： ◎ The following terms and abbreviations are used in this module.

~UA（ User Agent ）

利用者に利するため，~CSS~stylesheetを読み取る／書き出す~programであって、次のいずれかに分類されるもの： `文書$の描画を目的とする~program（例えば，~browser）, または ~stylesheetの作成-を目的とする~program（例えば，~editor）。 ~UAはいずれの分類にも入り得る（~stylesheetを読み取る／書き出す~programは他にも在るが、この~moduleは，それらは対象にしない）。 ◎ A program that reads and/or writes CSS style sheets on behalf of a user in either or both of these categories: programs whose purpose is to render documents (e.g., browsers) and programs whose purpose is to create style sheets (e.g., editors). A UA may fall into both categories. (There are other programs that read or write style sheets, but this module gives no rules for them.)

文書

SGML や XML 文書 `XML11$r など、要素と属性からなる木~構造を備える文書。 ◎ A tree-structured document with elements and attributes, such as an SGML or XML document [XML11].

~stylesheet

~CSS~stylesheet ◎ A CSS style sheet.

8.2. ~level

この節は参考である。 ~CSSの特色機能は、いくつかの~levelに分かれており，より下位のものが上位~levelの一部を成している（全部的な説明は `CSS-2017$r を見よ）。 以下の~listは、この仕様によるどの特色機能がどの~levelに入るかを述べる。 ◎ This section is informative. CSS has different levels of features, each a subset of the other. (See [CSS-2017] for a full explanation.) The lists below describe which features from this specification are in each level.

~level 1

~level 2 に挙げるものに一致する。 【なので、和訳は省略する。】 ◎ • background-color • background-image only one image (no layers) • background-repeat: only repeat | repeat-x | repeat-y | no-repeat • background-attachment: only scroll | fixed • background-position: only one or two values allowed • background shorthand: only color, image, repeat, attachment and position • border-color properties • border-style properties • border-width properties • border-top, border-bottom, border-right, border-left, and border shorthands

~level 2

• `background-color$p
• `background-image$p — 画像は 1 枚に限られる（層は存在しない）
• `background-repeat$p — `repeat$v | `repeat-x$v | `repeat-y$v | `no-repeat$v のみ
• `background-attachment$p — `scroll$v | `fixed$v のみ
• `background-position$p — 成分値の個数は 2 個まで
• `background$p 略式~prop — `-color^p, `-image^p, `-repeat^p, `-attachment^p, `-position^p のみ
• `border-*-color$p
• `border-*-style$p
• `border-*-width$p
• `border-top$p, `border-bottom$p, `border-right$p , `border-left$p, `border$p 略式~prop

◎ • background-color • background-image: only one image (no layers) • background-repeat: only repeat | repeat-x | repeat-y | no-repeat • background-attachment: only scroll | fixed • background-position: only one or two values allowed • background: only color, image, repeat, attachment and position • border-color properties • border-style properties • border-width properties • border-top, border-bottom, border-right, border-left, and border shorthands

~level 3

この文書に述べられた，すべての特色機能 ◎ All features described in the CSS Backgrounds and Borders Module Level 3

9.1. 2017 年 10 月 17 日付 勧告候補からの変更点

• ~browserによる［ `text-shadow$p ／ `drop-shadow()$v ］の直列化と合致させるため、 `shadow$t 文法における順序を逆にした。 （ Issue 2305）

  <shadow> = inset? && <length>{2,4} && <color>?
  <shadow> = <color>? && <length>{2,4} && inset?
  

  ◎ Inverted order of <shadow> grammar to match browser serialization and text-shadow/drop-shadow(). (Issue 2305) ◎ <shadow> = inset<color>? && <length>{2,4} && <color>inset?

9.2. 2014 年 9 月 9 日付 勧告候補からの変更点

2014 年 9 月 9 日付 勧告候補 からの（自明でない）変更点は： ◎ The following (non-trivial) changes were made to this specification since the 9 September 2014 Candidate Recommendation:

• 抜けていた `box-shadow$p に対する値 `none^v の定義を追加した。 （見た目上は十分明らかなので、今まで誰も気付かなかった。） ◎ Added missing definition of box-shadow: none. (Apparently this was obvious enough that nobody noticed it was missing until now.)
• `final-bg-layer$t の `background-color$tp 成分を，直列化のために先頭に移動した — ~~有意義とは言えなさそうだが、一部の作者は，それを期待していると見受けられるので。 ◎ Moved <‘background-color’> component of <final-bg-layer> to the front for serialization because some authors seem to expect this even though it makes less sense?
• `border-collapse$p が `collapse^v にされた~tableにおける `border-*-radius^p の効果を無くした。 ◎ Dropped effect of border-radius from collapsed-borders tables.
• `position^t を `bg-position$t に改称した — 他の~propには、 3 個の成分値による構文はないので。 ◎ Renamed <position> back to <bg-position> since other properties will be eliding the three-value syntax.

9.3. 2014 年 2 月 4 日付 最終草案からの変更点

2014 年 2 月 4 日付 最終草案 からの（自明でない）変更点は： ◎ The following (non-trivial) changes were made to this specification since the 4 February 2014 Last Call Working Draft:

• 拡幅~半径と~margin半径の計算を， 拡幅／~margin が~border半径より大きいときにのみ係数を調整するように修正した。 ◎ Fixed spread radius and margin radius calculations to only apply adjustment factor when spread/margin is larger than border radius.
• 根~要素の `display$p が `none^v のときの~canvas背景の取り扱いが定義された。 ◎ Defined handling of canvas background when root element has display: none.

全部的な Disposition of Comments も用意されている。 ◎ A full Disposition of Comments is available.

9.4. 2012 年 6 月 24 日付 勧告候補からの変更点

2012 年 6 月 24 日付 勧告候補 からの（自明でない）変更点は： ◎ The following (non-trivial) changes were made to this specification since the 24 July 2012 Candidate Recommendation:

• `background-clip$tp, `background-origin$tp を `background$p 略式~propの他の層値から分離可能に。 そのように実装されているので。 ◎ Allow <‘background-clip’> and <‘background-origin’> to be separated by other component values in the background shorthand, since this is what is implemented.
• `box-shadow$p 値の中の `color^t と `inset^v の順序を入れ替え可能に。 そのようにしても多義的にはならず，~CSSは，一般に多義的にならない所では，順不同を許容するので。 ◎ Allow <color> and inset to be interleaved in any order in box-shadow, since they are not ambiguous and CSS generally allows variant ordering where not ambiguous.
• `box-shadow$p に対する拡幅において，角張った隅 （ `border-radius$p = 0 ）と曲った隅 (`border-radius$p > `拡幅~距離$ ）との間に連続性を与えるため、曲率を次第に増大させる隅~半径の公式を定義した。 これは、すべての中間状態に，より良い結果も与える。 ◎ Define gradually increasing corner radius formula for box-shadow spread curvature to create continuity between sharp corners (border-radius = 0) and curved corners (border-radius > spread distance). This also gives better results for all intermediate states.
• ~border半径に応じて~margin辺を曲げる方法のための定義を追加した。 （これは， `CSS-SHAPES$r に関連するものだが、 CSS Backgrounds and Borders Level 3 への適合性を変更しない） ◎ Add definition for how the margin edge is curved in response to border-radius. (This is relevant for [CSS-SHAPES], but does not change conformance to CSS Backgrounds and Borders Level 3.)
• `box-decoration-break$p は、今や `CSS3-BREAK$r に移行された。 ◎ Removed box-decoration-break; it is now part of [CSS3-BREAK].
• `box-shadow$p に対する拡幅の定義を整備した。 ◎ Tighten up the definition of spread for box-shadow.
• `border-style$p に対する `none^v が，初期 `border-image-width$p を 0 に設定することを明確化（ `border-image-width$p は初期時には `border-width$p の算出値に設定され，この場合 0 になるので）。 ◎ Clarify that a border-style of none also implies an initial border-image-width of zero (since border-image-width is initially set to the computed border-width, which in this case is zero).
• `background-attachment$p: `local^v のときの~scrollingへの影響を明確化した。 ◎ Clarified how background-attachment: local is affected by scrolling.
• すべての `background-position$p 値が補間-可能であることを明確化するため、 `background-position$p の算出値は単純~化された。 ◎ Simplified computed value of background-position to clarify that all background-position values are interpolable.
• 各~prop定義表に “~animation” の欄を追加した。 ◎ Added “Animatable” values to each property definition table.

9.5. 2012 年 4 月 17 日付 勧告候補からの変更点

2012 年 4 月 17 日付 勧告候補 からの（編集上のものでない）変更点は： ◎ The following (non-editorial) changes were made to this specification since the 17 April 2012 Candidate Recommendation:

• `background-position$p の算出値の中の誤りを修正した： 算出値は位置（ `bg-position$t ）の~listにされた。 ◎ Fix error in computed value of background-position: the computed value is a list of positions.
• `border-radius$p が 対話-可能な面積を削減するときに，~boxの［ 横幅／縦幅 ］の増大を要し得ることを指摘する注記を追加した。 ◎ Add a note pointing out that when border-radius reduces the interactive area, the width/height of the box might need to be increased.

9.6. 2012 年 2 月 14 日付 “最終” 作業草案からの変更点

2012 年 2 月 14 日付 “最終” 作業草案 からの（編集上のものでない）変更点は： ◎ The following (non-editorial) changes were made to this specification since the 14 February 2012 “Last Call” Working Draft:

これらの変更点は、考査~期間に寄せられた~commentに対応するものである。 全部的な詳細は、 Disposition of Comments を見よ。 ◎ These changes were in response to comments received during the review period. For details, see the full Disposition of Comments.

• §2.1： この~moduleのどの~propが `first-line$pe, `first-letter$pe 疑似要素に適用されるかを定義した。 ◎ Section 2.1: Defined which properties from this module apply to the ::first-line and ::first-letter pseudo-elements.
• §3.4： `background-repeat$p の算出値における不正な定義を修正した。 算出値は常に~keywordの~pairであり, 決して単独の~keywordにならない。 ◎ Section 3.4: Fixed the incorrect definition of the computed value of background-repeat. The value is always a pair of keywords, never a single keyword.
• §3.10： `background$p ~propが再設定する~propの~listから抜けていた， `background-image$p を追加した。 ◎ Section 3.10: Added the missing background-image to the list of properties that the background property reset.
• §4.3： `border-width$p に対する負の長さは許容されないことを追加した。 ◎ Section 4.3: Added that negative lengths are not allowed on border-width.
• §5.1： `border-radius$p に対する負の長さは許容されないことを追加した。 ◎ Section 5.1: Added that negative lengths are not allowed on border-radius.
• §6.8： 縮約された~borderを伴う~table上の `border-image$p による効果についての節, および その描画の定義は，先送りする言及を追加した。 ◎ Section 6.8: Added a section about the effect of border-image on tables with collapsed borders and added that the rendering will be defined later.

9.7. 2011 年 2 月 15 日付 勧告候補からの変更点

2011 年 2 月 15 日付 勧告候補 からの変更点は： ◎ The following changes were made to this specification since the 15 February 2011 Candidate Recommendation:

• §3.9： `background-size$p 値の成分が 2 値とも `auto^v で, 画像が内在的~次元を持たない場合にどうなるかを定義した。

  Section 3.9: Defined what happens if background-position has two auto values and the image is missing an intrinsic dimension.

  If both values are auto then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above.

• §5.4： 隅の継ぎ上での 色と~styleの遷移 の中点は（一定の制限の下で）未定義のままに。 前の定義は、間違っていたので。

  Section 5.4: Made center of color and style transitions undefined (within certain limits) on corner joins, since previous definition was wrong.

  The center of color and style transitions between adjoining borders is at the point on the curve that is at an angle that is proportional to the ratio of the border widths. For example, if the top and right border widths are equal, that point is at a 45° angle from the horizontal, and if the top is twice the width of the right the point is at a 30° angle from the horizontal. The line demarcating this transition is drawn between the point at that angle on the outer arc and the point at that angle on the inner arc.

  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 must be proportional to the ratio of the border widths such that a function of its location is continuous with respect to this ratio. However it is not defined what these transitions look like or how “proportional” maps to a point on the curve.

• §6.2： ~border画像の切分け法 において、最初に切分け位置を決定するにあたり，まず~sizeを要することについて定義した。

  Section 6.2: Defined slicing of border images that must be sized first to determine slice positions. Added:

  If the image must be sized to determine the slices (for example, for SVG images with no intrinsic size), then it is sized as for an auto-sized background, using the border image area as the default object size in place of the background positioning area.

• §7.1： `box-decoration-break$p から影響される分断~型に，オプションとして 双方向性が課す分断を追加した。

  Section 7.1 Optionally added bidi-imposed breaks to the types of breaks affected by box-decoration-break. Added:

  UAs may also apply ‘box-decoration-break’ to control rendering at bidi-imposed breaks, i.e. when bidi reordering causes an inline to split into non-contiguous fragments. Otherwise such breaks are always handled as ‘slice’.

• §7.2： `box-shadow$p の既定の色が定義された。

  Section 7.2: Defined the default color of box-shadow.

  The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.

• §3.6： `background-position$p の算出値を明確化した。

  Section 3.6: Clarified computed value of background-position.

  If one or two values are specified, for a <length> the absolute length, otherwise a percentage. If three or four values are specified, two pairs of a keyword plus a length or percentage.

  Two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.

  Changed Equivalent to Computes in definition of keywords.

• §2.3（および，すべての~prop定義において）： 期待される~animation~moduleについての節を追加した。 ~prop定義表に “~animation” の欄を追加した。 ◎ Section 2.3 (and all property definitions): Added a section about expected an expected animations module. Added "Animatable" line to property definition tables.

• §3.6： 他の仕様の中で再利用し易くするため、 `bg-position^t 生成規則 を `position$t に改称し，文法を冗長だが理解し易いものに再構成した。

  Section 3.6: Renamed <bg-position> production to <position> for easier re-use in other specifications and recast the grammar to be more verbose but easier to understand.

  <bg-position> = [
    [ left | center | right | top | bottom | <length-percentage>  ]
  |
    [ left | center | right | <length-percentage>  ]
    [ top | center | bottom | <length-percentage>  ]?
  |
    [ center | [ left | right ] <length-percentage>? ] &&
    [ center | [ top | bottom ] <length-percentage>? ]
  ]
  

• §6.5： `border-image-repeat$p ~prop表の値に `space^v ~keywordを 追加した — 許容され得る値の~listに含まれていたが、構文~定義には含まれていなかった。

  Section 6.5: Added space keyword to border-image-repeat property value table: it was included in the list of allowable values, but not in the syntax definition.

  [ stretch | repeat | round | space ]{1,2} 
  

• §5.5： ~border半径の例の中の数学的な誤りを正した。

  Section 5.5: Corrected math error in border-radius example.

  The height (2.5em) is enough for the specified radii (0.5em plus 2.5em 2.0em).

• §4.3： `border-*-width$p に対する百分率を可用でなくした。 それらはその~propに含まれていないので。 ◎ Section 4.3: Marked Percentages field as N/A for border-width, since they are not included in the property.

9.8. 2009 年 12 月 17 日付 勧告候補からの変更点

2009 年 12 月 17 日付 勧告候補 からの変更点は： ◎ The following changes were made to this specification since the 17 December 2009 Candidate Recommendation:

• `background-clip$p に `content-box$v 値を追加した。 ◎ Addition of content-box value of background-clip.
• `background$p 略式~propにおける `background-clip$p と `background-origin$p に対する構文を変更した。 ◎ Change to the background shorthand syntax for background-clip and background-origin.
• `border-radius$p が曲線を生成するときに，色~遷移に~gradientの利用を推奨する言及を除去した。 ◎ Removal of recommendation to use gradients for color transitions when border-radius produces a curve.
• `box-shadow$p ~prop を（再び）追加した。 ◎ (Re)Addition of box-shadow property.
• 種々の明確化。 ◎ Various clarifications.