CSS 背景と枠線モジュール Level 3

1. 導入

この節は規範的ではありません。

要素がCSSボックスモデル [CSS-BOX-3]に従ってレンダリングされる際、 各要素は全く表示されないか、 1つ以上の矩形ボックスとして整形されます。 各ボックスには矩形の内容領域があり、 内容の周囲にはパディングの帯があり、 パディングの周囲には枠線があり、 枠線の外側にはマージンがあります。 （マージンは負の値も可能ですが、マージンは背景や枠線には影響しません。）

このモジュールのプロパティは、枠線領域の装飾や、 内容、パディング、および枠線領域の背景に関係します。 さらに、ボックスにはbox-shadowプロパティで「ドロップシャドウ」効果を与えることができます。

要素が複数のボックス断片に分割された場合、box-decoration-break [CSS-BREAK-3]は さまざまな断片間で枠線や背景がどのように分割されるかを定義します。 （要素は行の終わり、列の終わり、またはページの終わりで分割され、 次の行、列、またはページで継続される場合、複数の断片になることがあります。）

背景・枠線・シャドウの相対的な重ね順はこのモジュールで定義されています。 これらのレイヤーが他のレンダリングコンテンツとどのように相互作用するかについては、 付録E「積み重ねコンテキストの詳細な説明」を [CSS2] 参照。

1.1. モジュールの相互作用

このモジュールは、[CSS2]のセクション8.5および14.2で定義された背景と枠線の機能を置き換え、拡張します。

このモジュールのすべてのプロパティは、::first-letter 疑似要素に適用されます。 背景プロパティやborder-radiusプロパティは ::first-line 疑似要素にも適用されます。 UAは（必須ではありませんが） border-imageやbox-shadowプロパティを::first-lineに適用しても構いません。 UAは border-color/style/widthプロパティを::first-lineに適用してはなりません。[CSS2]

1.2. 値の定義

この仕様は、CSSプロパティ定義規則を[CSS2]から継承し、値定義構文を[CSS-VALUES-3]から使用します。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。 例えば、CSS Imagesとの組み合わせにより、 CSSグラデーションをbackground-imageやborder-image値として使用できます。[CSS-IMAGES-3]

各プロパティ定義に記載されている値以外にも、 この仕様で定義されたすべてのプロパティは、 CSS全体キーワードをプロパティ値として受け入れます。 可読性のため、ここでは明記していません。

2. 背景

各ボックスには、完全に透明（デフォルト）または色や1つ以上の画像で塗りつぶされた背景レイヤーがあります。 背景プロパティは、どの色（background-color） および画像（background-image）を使用するか、 それらがどのようなサイズ・位置・タイルになるかなどを指定します。

背景プロパティは継承されませんが、 親ボックスの背景はデフォルトで透過されているため、 初期値のtransparent値によって親の背景が透けて見えます。

2.1. 複数背景画像のレイヤー化

ボックスの背景は複数の背景画像レイヤーを持つことができます。 レイヤー数はbackground-imageプロパティの、 カンマ区切り値の数によって決まります。 noneという値でもレイヤーは生成されることに注意してください。

各背景画像は、 その他の背景プロパティの対応する値に従ってサイズ・位置・タイル化されます。 リストは先頭から順に対応付けされ、 余分な値は無視されます。 プロパティの値がレイヤー数に足りない場合は、 UAは リストの値を繰り返して十分な数になるように使用値を計算する必要があります。

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;

リストの最初の画像がユーザーに最も近いレイヤーとなり、 次の画像がその背後に描画されます。 背景色が指定されていれば、 他の全てのレイヤーの下に描画されます。

注: border-imageプロパティでも背景画像を指定できますが、 それが存在する場合、背景プロパティで作成される背景レイヤーの上に描画されます。

2.2. ベースカラー： background-color プロパティ

このプロパティは、ボックスの背景色を設定します。 この色は、背景画像の背後に描画されます。

h1 { background-color: #F00 } /* 背景を赤に設定 */

背景色は、 最も下位のbackground-clip値によって 背景画像レイヤーに合わせてクリップされます。

2.3. 画像ソース： background-image プロパティ

このプロパティは、要素の背景画像を指定します。 画像は最初に指定したものが最前面（ユーザーに最も近い）に描画され、 2番目以降はその背後に描画されます。 プロパティ値はカンマ区切りの <bg-image>値のリストとして与えます。

<bg-image> = <image> | none

noneという値は背景画像レイヤーとしてカウントされますが、何も描画しません。 幅や高さがゼロの画像、ダウンロードに失敗した画像、表示できない画像（サポート外の形式など）も同様にレイヤーとしてカウントされますが描画されません。

§ 2.1 複数背景画像のレイヤー化を参照してください。background-imageが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

背景画像を設定する際は、 画像が利用できない場合にテキストとのコントラストを確保するため、 background-colorも指定しましょう。

アクセシビリティの観点から、 背景画像だけで重要な情報を伝えないようにしてください。 Web Content Accessibility Guideline F3 [WCAG20]をご参照ください。 画像は非グラフィカルな表示ではアクセスできず、 特に背景画像は高コントラスト表示モードなどで無効化される場合があります。

注: スタイリッシュな前景画像はCSSの content プロパティで指定できます。 意味的に重要な前景画像は文書マークアップ（例：HTMLの<img>タグ）で提供してください。

注: Media fragmentsで画像の一部のみを表示できます。 CSS Imagesモジュールでは 画像形式のフォールバック構文や表示制御が追加される予定です。

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

実装においては、表示されない（例：他の完全不透明画像の背後など）画像をダウンロード・描画しないなど最適化しても構いません。

2.4. 画像のタイル化： background-repeat プロパティ

このプロパティは背景画像がサイズ指定と配置された後、どのようにタイル化されるかを指定します。 プロパティ値はカンマ区切りの <repeat-style>値のリストです。

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

<repeat-style>の単一値は以下の意味になります：

repeat-x

repeat no-repeatに算出されます。

repeat-y

no-repeat repeatに算出されます。

repeat

repeat repeatに算出されます。

space

space spaceに算出されます。

round

round roundに算出されます。

no-repeat

no-repeat no-repeatに算出されます。

<repeat-style>値が2つのキーワードからなる場合、 1つ目は水平方向に、 2つ目は垂直方向に適用されます：

repeat

画像は、 背景描画領域を覆うために必要なだけ繰り返されます。

space

画像は、 背景配置領域にクリップされずに収まるだけ繰り返され、 画像間が均等にスペースされて領域を埋めます。 最初と最後の画像は領域の端に接します。 背景描画領域が背景配置領域より大きい場合、 パターンは背景描画領域全体を覆うまで繰り返されます。 この方向で画像が2つ収まらない場合のみ background-positionが使われます。

round

画像は 背景配置領域にちょうど収まるように繰り返されます。もし整数回収まらなければ、画像がリサイズされて収まるようになります。 background-sizeの式を参照。背景描画領域が配置領域より大きい場合、パターンは背景描画領域全体を覆うまで繰り返されます。

no-repeat

画像は1回だけ配置され、この方向に繰り返されません。

2つのキーワードのいずれかがno-repeatでない限り、 背景描画領域全体がタイル化されます。 つまり、単なる縦または横ストリップだけでなく全体が覆われます。

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

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

§ 2.1 複数背景画像のレイヤー化を参照してください。background-repeatが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.5. 画像の固定： background-attachment プロパティ

背景画像が指定されている場合、 このプロパティはそれらが ビューポート（fixed）に固定されるか、 ボックス（scroll）に合わせてスクロールするか、 または内容（local）に合わせてスクロールするかを指定します。 プロパティ値はカンマ区切りの<attachment>キーワードのリストです。

<attachment> = scroll | fixed | local

fixed

背景はビューポートに固定されます。 ページメディアのようにビューポートがない場合、 fixed背景は ページボックスに固定されるため、すべてのページで繰り返されます。

注: ビューごとにビューポートは1つだけです。 ボックスがスクロールコンテナであっても、 fixed背景はボックスと一緒に動きません。

local

背景はボックス内容に固定されます。 ボックスがスクロール機構を持つ場合、 背景はボックス内容と一緒にスクロールし、 背景描画領域と背景配置領域は スクロール可能なオーバーフロー領域に対して相対的になります。 スクロール可能なオーバーフロー領域には 枠線領域は含まれないため、 スクロールコンテナでは border-box値は padding-boxと同じように扱ってもかまいません。

scroll

背景はボックス自体に固定され、内容と一緒にスクロールしません。 （事実上ボックスの枠線に付随します。）

画像が固定されていても、 背景描画領域内やクリップされない場合にしか表示されません。 （§ 2.11 特殊要素の背景で背景画像がクリップされない場合について記載があります。） したがって、画像がタイル化されていなければ、表示されない場合もあります。

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

注: fixed背景に対応しないユーザーエージェント （例えばハードウェア制限などによるもの）は、キーワードfixedを含む宣言を無視します。 例：

body {
  /* 全UA用: */
  background: white url(paper.png) scroll;
  /* fixed背景対応UA用: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 全UA用: */
  background: silver;
  /* fixed背景対応UA用: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

§ 2.1 複数背景画像のレイヤー化を参照してください。background-attachmentが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.6. 画像の配置： background-position プロパティ

背景画像が指定されている場合、 このプロパティはそれぞれのbackground positioning area内で （リサイズ後）の初期位置を指定します。

プロパティ値はカンマ区切りの <bg-position>値のリストです。

<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>? ]
]

値が1つだけ指定された場合、2つ目の値はcenterとみなされます。 2つ値が指定された場合、 1つ目が<length-percentage>なら水平方向（またはオフセット）、 2つ目が<length-percentage>なら垂直方向（またはオフセット）です。 <length-percentage>値は、 背景画像の左上隅がbackground positioning areaの左上隅からどれだけオフセットされるかを表します。

注: キーワードのペアは順序を入れ替えてもよいですが、 キーワードと長さ・パーセンテージの組み合わせは順番を変えられません。 したがってcenter leftは有効ですが50% leftは無効です。

値が3つまたは4つ指定された場合、 各<length-percentage>はオフセットを表し、 その直前のキーワードでどの端からのオフセットかを指定します。 例えば、background-position: bottom 10px right 20pxは、 下端から10px上、右端から20px左へのオフセットを表します。 3値の場合、足りないオフセットは0とみなされます。

正の値はbackground positioning areaの端から内側へのオフセット、 負の値は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>

水平方向のパーセンテージは (background positioning areaの幅 - 背景画像の幅)に対する割合です。 垂直方向のパーセンテージは (background positioning areaの高さ - 背景画像の高さ)に対する割合です。 画像のサイズはbackground-sizeで指定された値です。

例えば、値ペアが0% 0%なら、 画像の左上隅が通常ボックスのpadding edgeの左上隅に揃います。 100% 100%なら画像の右下隅が領域の右下隅に揃います。 75% 50%なら画像の75%横・50%縦の点が領域の75%横・50%縦の点に配置されます。

<length>

長さ値は固定長オフセットを指定します。 例えば2cm 1cmなら画像の左上隅が background positioning areaの左上隅から右へ2cm・下へ1cmの位置に配置されます。

top

1つまたは2つ値の場合は垂直方向の位置に0%として算出されます。 それ以外の場合は次のオフセットの基準となる上端を指定します。

right

1つまたは2つ値の場合は水平方向の位置に100%として算出されます。 それ以外の場合は次のオフセットの基準となる右端を指定します。

bottom

1つまたは2つ値の場合は垂直方向の位置に100%として算出されます。 それ以外の場合は次のオフセットの基準となる下端を指定します。

left

1つまたは2つ値の場合は水平方向の位置に0%として算出されます。 それ以外の場合は次のオフセットの基準となる左端を指定します。

center

水平方向が指定されていない場合は50%（left 50%）として算出され、 垂直方向が指定されていない場合は50%（top 50%）として算出されます。

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

§ 2.1 複数背景画像のレイヤー化を参照してください。background-positionが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.6.1. background-position値のシリアライズ

specified valueとcomputed valueは <bg-position>型では [CSS-VALUES-4]で定義されている通りにシリアライズされます（<position>）。 3値の生成式（<position>では無効）は、 specified valueのシリアライズは等価な4値構文と同じですが、 省略されたオフセットは省略されたままになります。

2.7. 描画領域： background-clip プロパティ

背景描画領域を決定します。 これは背景が描画される範囲を決定します。 値の意味は以下の通りです：

border-box

背景はborder box内（クリップ）で描画されます。

padding-box

背景はpadding box内（クリップ）で描画されます。

content-box

背景はcontent box内（クリップ）で描画されます。

注: ルート要素は異なる背景描画領域を持つため、 background-clipプロパティは ルート要素に指定しても効果はありません。 § 2.11 特殊要素の背景を参照してください。

注: 背景は常に枠線（border）の背後に描画されます。 [CSS2]付録E「積み重ねコンテキストの詳細な説明」を参照してください。

§ 4.2 角の形状でborder-radiusが 背景描画領域の形状にどのように影響するかを説明しています。

§ 2.1 複数背景画像のレイヤー化でbackground-clipが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.8. 配置領域： background-origin プロパティ

このプロパティは背景配置領域を決定します。 これは背景画像が配置される領域です。 複数のボックス断片（例：複数行のインラインボックス、複数ページのボックス）として描画される要素については、 box-decoration-break [CSS-BREAK-3]が どのボックスを対象にして背景配置領域を決定するかを指定します。

padding-box

配置はpadding boxに対して行われます。 （単一ボックスの場合、0 0はpadding edgeの左上隅、100% 100%は右下隅です。）

border-box

配置はborder boxに対して行われます。

content-box

配置はcontent boxに対して行われます。

このlayerのbackground-attachment値が fixedである場合、 このプロパティは効果がありません。 この場合、背景配置領域は 初期包含ブロックです。

注: background-clipがpadding-box、 background-originがborder-box、 background-positionがtop left （初期値）で、 要素がゼロでない枠線（border）を持つ場合、 背景画像の上端・左端がクリップされることになります。

§ 2.1 複数背景画像のレイヤー化でbackground-originが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.9. 画像サイズ指定： background-size プロパティ

このプロパティは各背景画像のサイズを指定します。 プロパティ値はカンマ区切りの <bg-size>値のリストです。

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

値の意味は以下の通りです：

contain

画像の自然なアスペクト比（あれば）を保ったまま、 幅・高さの両方が背景配置領域内に収まる最大サイズに拡大・縮小します。

cover

画像の自然なアスペクト比（あれば）を保ったまま、 幅・高さの両方が背景配置領域を完全に覆う最小サイズに拡大・縮小します。

[ <length-percentage [0,∞]> | auto ]{1,2}

1つ目の値は画像の幅、 2つ目の値は高さを指定します。 1値のみの場合、2つ目はautoとみなされます。

<percentage>は背景配置領域に対する割合です。

一方の軸がautoの場合、 他方の軸のサイズと画像の自然なアスペクト比に基づいて解決されます。 それがなければ画像の自然サイズを用い、 それもなければ100%として扱います。

両方ともautoの場合は、 画像の自然な幅・高さ を（あれば）使い、 欠けている方は上記の通りautoとして扱います。 画像に自然サイズがない場合は、 containと同様に決定されます。

負の値は無効です。

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;            /* default */
background-image: url(flower.png) }

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

background-repeatが一方または両方の軸でroundの場合、 2段階目があります。 UAはその軸（または両軸）で画像を拡大・縮小し、 背景配置領域にちょうど整数回収まるようにします。 幅の場合（高さも同様）：

X ≠ 0 が1段階目後の画像幅、 Wが背景配置領域幅とすると、 切り上げ幅X' = W / round(W / X) （round()は最も近い自然数（ゼロより大きい整数）を返す関数）。

background-repeatが一方のみroundで background-sizeが他方でautoの場合、 3段階目があります： 他方の軸は元のアスペクト比を維持するように拡大・縮小されます。

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

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* default */
  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;
  background-size: auto 4em }

背景画像の幅または高さがゼロになる場合、 画像は表示されません。 （効果は透明画像と同じです。）

§ 2.1 複数背景画像のレイヤー化でbackground-sizeが他のカンマ区切り背景プロパティとどのように連携して 各背景画像レイヤーを形成するかを説明しています。

2.10. 背景ショートハンド： background プロパティ

backgroundプロパティは、ほとんどの背景プロパティをスタイルシートの同じ場所で設定できるショートハンドプロパティです。 カンマ区切りの項目数が背景画像レイヤー数を定義します。 有効な宣言の場合、各レイヤーごとに ショートハンドはまずbackground-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachmentの各プロパティを その初期値に設定し、 宣言でこのレイヤーに明示的に指定された値だけを上書きします。 最後にbackground-colorは指定された色に、なければ初期値に設定されます。

このプロパティ値はカンマ区切りの値のリストです：

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>

注: 色は<final-bg-layer>で許可されますが、<bg-layer>では許可されません。

1つの<visual-box>値がある場合、 background-originおよびbackground-clipの両方をその値に設定します。 2つ値があれば、 1つ目がbackground-origin、 2つ目が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. 特殊要素の背景

文書キャンバスは文書がレンダリングされる無限の面です。[CSS2] 要素はキャンバスに対応しないため、 キャンバスのスタイリングを可能にするために CSSはルート要素（HTMLの場合は<body>要素）の背景を以下のように伝播します。 ただし、キャンバス用の背景となる要素がdisplay: noneの場合、 キャンバス背景は透明になります。

キャンバス背景が不透明でない場合、 下のキャンバス面が透けて見えます。 キャンバス面のテクスチャはUA依存ですが、 （通常は不透明な白です）。

2.11.1. キャンバス背景とルート要素

ルート要素の背景はキャンバス背景となり、その背景描画領域は キャンバス全体を覆います。 ただし画像はルート要素のボックスに対してサイズ指定・配置され、 その要素だけに描画されるかのように扱われます。 （つまり背景配置領域はルート要素基準で決まります。） ルート要素はこの背景を再度描画しません。 つまり、背景の使用値はtransparentです。

2.11.2. キャンバス背景とHTML <body> 要素

ルート要素がHTML HTML要素 またはXHTML html要素[HTML]の場合： computed valueがbackground-imageでルート要素に対しnone、 background-colorでtransparentのとき、 ユーザーエージェントはその要素の最初の HTML BODYまたはXHTML body子要素から 背景プロパティのcomputed valuesを伝播しなければなりません。 そのBODY要素の背景プロパティの使用値は初期値であり、 伝播された値はルート要素に指定されたかのように扱われます。 HTML文書の著者はキャンバス背景をBODY要素で指定することが推奨されます。 HTML要素よりも。

注: containmentを使うと HTML body 要素のこの特別な扱いは無効化されます。 詳しくはCSS Containment 1 § 2 強力なcontainment: containプロパティ参照。

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

2.11.3. ::first-line疑似要素の背景

::first-line疑似要素は 背景に関してインラインレベル要素として扱われます （[CSS2] §5.12.1参照）。 つまり、例えば左揃えの1行目では、 背景が必ず右端まで伸びるとは限りません。

3. 枠線

borderは、定義済みスタイル （実線、二重線、点線、疑似3D枠線など）または画像のいずれかで表現できます。 前者の場合は、さまざまなプロパティで スタイル（border-style）、 色（border-color）、 太さ（border-width） を指定します。

3.1. 線の色：border-color プロパティ

これらのプロパティは、borderの前景色をborder-styleプロパティで指定された枠線に設定します。

border-colorプロパティは、ショートハンドプロパティであり、border-top-color、border-right-color、border-bottom-color、border-left-colorを1つの宣言で設定します。

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

3.2. 線パターン：border-style プロパティ

これらのプロパティは、borderを表示するかどうか、 そして表示する場合はどのスタイルで描画するか（border imageで上書きされない限り）を制御します。

border-styleプロパティは、ショートハンドプロパティであり、border-top-style、border-right-style、border-bottom-style、border-left-styleを1つの宣言で設定します。

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

スタイルは<line-style>キーワードで指定されます：

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

値の意味は以下の通りです：

none

枠線なし。 色・太さは無視されます（枠線の太さは0）。 border-image-widthの初期値も0になります。

hidden

noneと同じですが、 border-collapsedテーブルの衝突解決ルールで挙動が異なります [CSS2]。

dotted

丸い点の連続。

dashed

角のある破線の連続。

solid

一本線。

double

平行な実線2本、間にスペースあり。 （線の太さは指定されませんが、2本の線とスペースの合計がborder-widthと同じになります。）

groove

キャンバスに彫り込まれたような見た目。 （通常、指定したborder-colorより少し明るい・暗い2色で「影」を作ることで実現されます。）

ridge

キャンバスから盛り上がったような見た目。

inset

枠線内側の内容がキャンバスに沈み込んだような見た目。 ridgeと同様に、枠線の折りたたみモデルでは扱われます。[CSS2]

outset

枠線内側の内容がキャンバスから浮き上がったような見た目。 grooveと同様に、枠線の折りたたみモデルでは扱われます。[CSS2]

枠線は要素の背景の手前、内容の背後（重なっている場合）に描画されます。

注: 枠線色が黒や白に近い場合、3D効果 （groove、ridge、inset、 outset）の色計算は中間色と異なる場合があります。

注: 点線や破線の間隔や破線の長さは制御できません。 実装では角が対称になるような間隔を選ぶことが推奨されます。

注: 異なるスタイルの枠線の角をどのように接合するかは本仕様では定義しません。 また、角丸ではパディングが角の半径より小さい場合、角や内容が重なることがあります。

3.3. 線の太さ：border-width プロパティ

これらのプロパティはborderの太さ、すなわち枠線幅を指定します。ここで

<line-width> = <length [0,∞]> | thin | medium | thick

負の値は無効です。 thin、medium、thickキーワードは、 それぞれ1px、3px、5pxに相当します。

border-widthプロパティは、ショートハンドプロパティであり、border-top-width、border-right-width、border-bottom-width、border-left-widthを1つの宣言で設定します。

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

注: 初期幅はmediumですが、 初期スタイルはnoneです。 したがって、使用初期幅は0となります。

3.4. 枠線ショートハンドプロパティ

これらのショートハンドプロパティは、 ボックスの上・右・下・左border-width、border-color、border-styleを設定します。 省略された値は初期値となります。

borderプロパティは、ボックスの全枠線のborder-width、border-color、border-styleを一括設定するショートハンドプロパティです。 marginやpaddingのショートハンドプロパティと異なり、 borderプロパティでは四辺で異なる値は設定できません。 それには他のborderプロパティを使う必要があります。

borderショートハンドはborder-imageも初期値にリセットします。 そのため、著者はborderショートハンドを使い、 他のショートハンドや個別プロパティよりも先に枠線設定を上書きすることが推奨されます。 これによりborder-imageもリセットされ、 新しいスタイルが確実に適用されます。

注: CSS作業グループはborderショートハンドが将来的に全てのborderプロパティもリセットすることを意図しています。 例えば今後border-charactersプロパティが追加されて枠線にグリフを使えるようになった場合も、 borderショートハンドでリセットされます。 borderショートハンドで枠線をリセットすることで、 将来どんなプロパティが追加されても「ブランクキャンバス」が保証されます。

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

これらのプロパティは機能が重複する部分があるため、 規則の記述順が重要です。

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

4. 角丸

4.1. 曲線半径：border-radius プロパティ

<length-percentage>値2つはborder-*-radiusプロパティの値であり、 外側border edgeの角の形状を定義する四分円楕円の半径を表します（下図参照）。 1つ目は水平方向の半径、2つ目は垂直方向の半径です。 2つ目が省略された場合は1つ目の値が使われます。 どちらかがゼロなら角は丸くならず、四角になります。 水平方向のパーセンテージ指定はborder boxの幅を、 垂直方向はborder boxの高さを基準にします。 負の値は無効です。

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

border-radiusショートハンドは4つのborder-*-radiusプロパティを一括設定します。 スラッシュの前後で値がある場合は、前が水平方向、後ろが垂直方向の半径を設定します。 スラッシュがなければ両軸とも同じ値です。 4つの値は順に左上・右上・右下・左下です。 左下省略時は右上、右下省略時は左上、右上省略時は左上と同じ値になります。

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;

4.2. 角の形状

padding edge（内側枠線）の半径は 外側枠線半径から対応する枠線の太さを差し引いた値です。 これが負の場合は内側半径はゼロになります。 （この場合枠線内側曲線の中心と外側曲線の中心が一致しないことがあります。） 同様にcontent edgeの半径は padding edgeの半径から対応するpaddingを引いた値（負ならゼロ）です。 曲線領域における枠線・パディングの太さは隣接辺から補間され、 隣接する2辺の太さが異なる場合、角は太い方から細い方への滑らかな遷移を見せます。

すべての枠線スタイル（solid、dotted、insetなど） は枠線の曲線に沿って描画されます。

注: 角の外側曲線中心が反対側のpadding edge（反対側のborder area）を超える場合、 内側曲線は完全な四分円楕円にはなりません。

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

margin edgeはborder edgeの外側に位置するため、 各枠線半径に対応するマージンの厚みを加算して半径を計算します。 ただし、枠線半径が小さく鋭い角を作る場合（丸角と鋭角の連続性を保つため）、 枠線半径がマージンより小さい場合は、 コーナー半径の計算でマージンを比率 1 + (r-1)³（rは枠線半径/マージン）で乗算します。

4.3. 角のクリッピング

border imagesはborder-radiusの影響を受けませんが、 塗りやイベントハンドリングをborder、padding、contentエッジにクリップする他の効果は、 それぞれの曲線にクリップしなければなりません。 例えば、 背景はbackground-clipで指定された曲線、 overflowがvisible以外の値なら 曲線状のpadding edge（両軸のoverflowがvisibleでないとき）、 置換要素の内容は曲線状のcontent edge、 ポインターイベントは曲線状のborder edgeなどにクリップされます。

注: border-radiusが要素のインタラクティブ領域を減らすため、 著者は残されたインタラクティブ領域がターゲットプラットフォームの推奨最小値を満たしていることを確認してください。 特に、推奨される最小タッチターゲットサイズに準拠するには border-radius使用時に幅・高さを大きくする必要がある場合があります。

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

4.4. 色・スタイルの遷移

色やスタイルの遷移は、 枠線半径2つと内側曲線中心（枠線半径がborder widthより小さい場合はpadding edgeの角を表す点）を含む 最小矩形と交差する枠線区間内に収めなければなりません。

隣接する枠線のいずれかがゼロ幅の場合、 もう一方の枠線が遷移領域全体を占有します。 それ以外の場合、 隣接枠線間の色・スタイル遷移の中心は枠線幅比の連続単調関数となる曲線上の1点です。 ただしこの遷移の見た目や比から曲線上の点へのマッピング関数は定義されていません。

4.5. 曲線の重なり

角丸曲線は重なってはなりません。 隣接する枠線半径の合計がborder boxのサイズを超える場合、 UAは全ての枠線半径の使用値を重なりがなくなるまで比例的に縮小しなければなりません。 半径縮小のアルゴリズムは次の通りです：

f = min(L_i/S_i) （i ∈ {top, right, bottom, left}、S_iは辺i上の隣接角の半径合計、 L_top = L_bottom = ボックスの幅、 L_left = L_right = ボックスの高さ）。 f < 1なら全角半径をf倍して縮小します。

注: この式は四分円は四分円のまま、 大きい半径は小さい半径より大きく保ちますが、 すでに十分小さい角も減らす場合があり、 近接要素の枠線が同じ見た目になるはずが異なって見えることがあります。

曲線がスクロールバーなどのUI要素に干渉する場合、 UAは影響を受ける枠線半径のみ必要なだけ（それ以上は不可）さらに縮小してもかまいません。

例えば、下記のA枠線は下図の

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

高さ（2.5em）は指定された半径（0.5em＋2.0em）に十分です。 ただし高さが2emの場合、

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

全角を0.8倍に縮小する必要があります。 使用される枠線半径は 0.4em（0.5em→）と1.6em（2em→）になります。 B枠線は下図参照。

4.6. テーブルへの影響

border-radiusプロパティは table、inline-table、table-cellボックスに分離枠線モード（border-collapse: separate）で適用されます。 border-collapseがcollapseの場合は効果がありません。

5. 枠線画像

著者は枠線スタイルの代わりに画像を指定できます。 この場合、枠線のデザインはborder-image-sourceで指定された画像の辺や角から取得され、 そのピースは枠線画像領域のサイズに合わせてスライス・スケール・引き伸ばしされます。 border-imageプロパティはレイアウトに影響しません。 ボックスやその内容、周囲の内容のレイアウトは border-widthおよびborder-styleプロパティのみで決まります。

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

これはより複雑な例で、 枠線画像がフォールバックの枠線スタイルと対応し、枠線領域を超えて拡張できることを示します。 枠線画像は角で拡張効果のある波状の緑枠線です：

他の枠線プロパティは以下のようにタイル配置に作用します：

ここではborder-widthは12pxですが、 border-image-widthは124pxになります。 枠線画像領域は border boxから31pxアウトセットし margin areaまで広がります。 枠線画像のロードに失敗した場合（またはUAがサポートしない場合）、 フォールバック描画は緑の二重枠線になります。

.notebox {
  border: double orange;
  /* 先に'border'ショートハンドを設定すること。そうしないと'border-image'が消される */
  border-image: url("border.png") 30 round;
  /* 他の'border'プロパティは後から設定可能 */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* 全枠線オフ */
  /* 'border'ショートハンドは'border-image'もリセット */
}

5.1. 画像ソース：border-image-sourceプロパティ

枠線描画をborder-styleプロパティによる描画の代わりに 画像で行うことを指定します。 fillキーワードがborder-image-sliceで指定された場合、 追加の画像背景としても使われます。 値がnone、画像が表示できない、またはプロパティが適用されない場合は枠線スタイルが使われます。 そうでなければ、要素のborder-style枠線は描画されず、 この枠線画像が 以下のセクションに従って描画されます。

5.2. 画像のスライス：border-image-slice プロパティ

このプロパティは画像の上・右・下・左端から内側へのオフセットを指定し、 画像を9分割します（4つの角・4つの辺・中央）。 中央画像部分は（fillキーワードがなければ）破棄され（完全透明扱い）、 キーワード指定時のみ保持されて背景上に描画されます。 （詳細は枠線画像の描画参照。）

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

<percentage [0,∞]>

パーセンテージは画像サイズ基準です： 水平方向は画像の幅、垂直方向は高さ。

<number [0,∞]>

数値は（ラスター画像の場合）画像のピクセル数、 ベクター画像の場合はベクトル座標を表します。

fill

fillキーワード指定時は枠線画像中央部分も保持されます。 （デフォルトは破棄、空扱い。）

負の値は無効です。 算出値が画像サイズより大きい場合は100%として扱います。

border-image-slice値で指定された領域は重なっても構いません。 ただし右幅と左幅の合計が画像幅以上なら 上下辺・中央部分の画像は空となり、透明画像の場合と同じ効果になります。 上下値も同様です。

スライス決定に画像のサイズ指定が必要な場合 （例：自然寸法のないSVG画像など）は、 デフォルトサイズアルゴリズムで サイズ指定なし・枠線画像領域をデフォルトオブジェクトサイズとしてサイズ決定します。

5.3. 描画領域：border-image-width プロパティ

枠線画像は 枠線画像領域という領域内に描画されます。 この領域の境界はデフォルトでborder boxに一致します。 詳しくはborder-image-outset参照。

border-image-widthの4値は、 枠線画像領域を9つの領域に分割するオフセットです。 オフセットは、領域の上・右・下・左からの内側距離をそれぞれ表します。

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

値の意味：

<length-percentage [0,∞]>

パーセンテージは枠線画像領域基準： 水平方向は幅、垂直方向は高さ。

<number [0,∞]>

数値は対応する算出済みborder-widthの倍数を表します。

auto

auto指定時は使用されるborder-image-widthは 対応する画像スライスの自然な幅または高さ（該当する方）です（border-image-slice参照）。 画像に必要な自然寸法がない場合は対応する算出済みborder-widthが使われます。

負の値はborder-image-width値として無効です。

対向するborder-image-widthオフセットが重なるほど大きい場合、 全border-image-widthオフセットの使用値は比例的に縮小されます。 数式： L_width（枠線画像領域の幅）、L_height（高さ）、 W_side（各辺のborder-image-widthオフセット）。 f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)). f < 1の場合、全Wはf倍に縮小します。

5.4. 枠線のはみ出し：border-image-outsetプロパティ

値は枠線画像領域がborder boxよりどれだけ外側に広がるかを指定します。

値が1つだけの場合は全辺に適用されます。 2つの場合は上・下に1つ目、右・左に2つ目が適用されます。 3つの場合は上に1つ目、右・左に2つ目、下に3つ目が適用されます。 4つの場合はそれぞれ上、右、下、左に適用されます。

<length [0,∞]>

指定された長さ分はみ出します。

<number [0,∞]>

対応する算出済みborder-widthの倍数分はみ出します。

負の値は無効です。

枠線画像のうちborder box外に描画された部分は スクロールをトリガーしません。 またマウスイベントに対して不可視であり、 要素に代わってイベントをキャプチャしません。

注: スクロール機構は引き起こしませんが、 はみ出し画像は祖先やビューポートでクリップされることがあります。

5.5. 画像タイル化：border-image-repeat プロパティ

このプロパティは枠線画像の各辺・中央部分の画像がどのように拡大・タイル化されるかを指定します。 1つ目のキーワードは上・中央・下部分の水平方向の拡大・タイル化、 2つ目は左・中央・右部分の垂直方向の拡大・タイル化に適用されます。 （2つ目が省略された場合は1つ目と同じとみなします。） 意味は以下の通り：

stretch

画像を対応する領域いっぱいに引き伸ばします。

repeat

画像を対応する領域に繰り返し配置します。

round

画像を対応する領域に繰り返し配置します。 領域にぴったり整数回収まらない場合は、画像サイズが調整されて収まるようになります。

space

画像を対応する領域に繰り返し配置します。 領域にぴったり整数回収まらない場合は、余ったスペースがタイル間に分散されます。

枠線画像パーツの拡大・タイル化の正確な処理は次セクション参照。

5.6. 枠線画像の描画

border imageがborder-image-sourceで指定され、border-image-slice値でスライスされた後、 得られた9つの画像は、4つのステップでそれぞれのborder image regionに 拡大・配置・タイル化されます：

1. border-image-widthに合わせて拡大。
   • 上・下辺の2画像は、それぞれのborder image regionの高さに合わせて拡大され、 幅は比例的にスケールされます。
   • 左・右辺の画像は、それぞれのborder image regionの幅に合わせて拡大され、 高さは比例的にスケールされます。
   • 角画像は対応するborder image regionの幅・高さに合わせて拡大されます。
   • 中央画像の幅は上画像と同じ倍率で拡大されます（倍率が0や無限大の場合は下画像の倍率、さらに駄目なら拡大なし）。 高さは左画像と同じ倍率で拡大されます（倍率が0や無限大の場合は右画像の倍率、さらに駄目なら拡大なし）。
2. border-image-repeatに合わせて拡大。
   • 1つ目のキーワードがstretchの場合、 上・中央・下画像はborder image areaの中央領域の幅に合わせてさらに拡大されます。 高さはこれ以上変更されません。
   • 1つ目のキーワードがroundの場合、 上・中央・下画像は幅が調整され、中央領域にちょうど整数回収まるようにリサイズされます。 （background-repeatのroundと同様。）
   • 1つ目のキーワードがrepeatまたはspaceの場合、 上・中央・下画像はさらに変更されません。
   • 2つ目のキーワードに対するstretch、round、repeat、spaceの効果は同様で、 左・中央・右画像の高さに適用されます。
3. 最初のタイルの配置。
   • 1つ目のキーワードがrepeatの場合、 上・中央・下画像はそれぞれの領域で左右中央に配置されます。 それ以外の場合はそれぞれのborder image areaの左端に配置されます。
   • 2つ目のキーワードがrepeatの場合、 左・中央・右画像はそれぞれの領域で上下中央に配置されます。 それ以外の場合はそれぞれのborder image areaの上端に配置されます。
4. タイル化と描画。
   • 画像はそれぞれの領域を埋めるようにタイル化されます。
   • spaceの場合、部分タイルは破棄され、余ったスペースは タイルの前・後・間に分散されます。 （最初のタイル前、最後のタイル後、タイル間の隙間が均等化されます。）これにより枠線画像の辺領域が空になることがあります。
   • 画像は通常の枠線と同じ積み重ねレベル（背景レイヤーの直前）で描画されます。
   • fillがborder-image-sourceで指定されていなければ 中央画像は描画されません。

5.7. 枠線画像ショートハンド：border-image プロパティ

これはborder-image-source、 border-image-slice、border-image-width、border-image-outset、 border-image-repeatをまとめて設定するショートハンドプロパティです。 省略された値は初期値になります。

5.8. テーブルへの影響

border-imageプロパティは border-collapseがcollapseに設定された テーブル・インラインテーブルの枠線にも適用されます。 ただし本仕様ではその画像枠線の描画方法は定義していません。 特に、画像枠線がセル・行・行グループの枠線とテーブル端でどう相互作用するかは定義されていません （border conflict resolution参照）。

今後の仕様で描画方法が定義される予定です。 それまではUAはcollapsed borderのテーブルにborder-imageを適用しないことが推奨されます。

6. その他の効果

注: box-decoration-breakプロパティは、 背景や枠線がフラグメント化されたボックスにどう適用されるかを定義するもので、 CSS Fragmentation Moduleへ移動されました。 [CSS-BREAK-3]

6.1. ドロップシャドウ：box-shadowプロパティ

box-shadowプロパティはボックスに1つ以上のドロップシャドウを付加します。 値は noneでシャドウなし、 またはカンマ区切りのシャドウリスト（前面から背面順）です。

各シャドウは<shadow>で指定し、 長さ2～4つ、色（省略可）、insetキーワード（省略可）で構成されます。 長さ省略時は0、色省略時はcurrentColor。

<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?

各<shadow>の構成要素の解釈は下記：

1つ目の<length>

シャドウの水平オフセット。 正の値で右、負で左にシャドウ。

2つ目の<length>

シャドウの垂直オフセット。 正で下、負で上にシャドウ。

3つ目の<length [0,∞]>

シャドウのぼかし半径。 負は無効。 0ならシャドウ端はシャープ、 大きいほど端がぼやける。 詳細は下記「シャドウのぼかし」参照。

4つ目の<length>

拡張距離。 正で全方向に拡張、負で縮小。 詳細は下記「シャドウ形状」参照。

内側シャドウの場合、拡張＝輪郭の縮小を意味します。

<color>

シャドウの色。省略時はcurrentColor。

inset

inset指定時、ドロップシャドウは 外側box-shadow（ボックスがキャンバス上に浮いているような影） から内側box-shadow（ボックスが切り抜かれたようにキャンバスが影を落とす）に変化します。

下記例はシャドウのspreadとblurの効果を示します：

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;

6.1.1. シャドウ形状・拡張・ノックアウト

外側box-shadowは、 要素のborder-boxが不透明として影を落とします。 spread距離0の場合、輪郭はborder boxと同じ形状・サイズ。 シャドウは枠線の外側のみ描画され、要素のborder-box内側はクリップされます。

内側box-shadowは、 padding edgeより外が不透明として影を落とします。 spread距離0なら輪郭はpadding boxと同じ形状・サイズ。 シャドウはpadding edge内側のみ描画され、要素のpadding box外側はクリップされます。

spread距離定義時、 上記輪郭を 外側box-shadowなら外側へ、 内側box-shadowなら内側へ spread距離でアウトセット（インセット）し（幅高さはゼロ以上に切り捨て）ます。

下記は青枠線付きオレンジボックスへのシャドウ例です。

border:5px solid blue; background-color:orange; width: 144px; height: 144px;	border-radius: 20px;	border-radius: 0;
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 /* spread */
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset

spreadを適用した時にボックス形状を保つため、 シャドウの角半径もborder-box（内側はpadding-box）の半径にspread距離を加算（内側は減算、ゼロ以上）します。 ただし角半径が小さい場合は鋭角を維持するため、 border radiusが spread距離未満（内側シャドウは負spread距離の絶対値未満）なら、 spread距離は比率 1 + (r-1)³（rは角半径/spread距離）を掛けて調整します。 例えば角半径10px・spread距離20px（r=0.5）なら シャドウ形状の角半径は10px＋20px×(1+(.5-1)³)＝27.5px（本来は30px）です。 この調整は各次元独立で適用されます。

border-imageはbox-shadow形状に影響しません。

6.1.2. シャドウ端のぼかし

非ゼロのぼかし半径指定時、 生成されるシャドウはガウスフィルタなどでぼかされます。 厳密なアルゴリズムは未定義ですが、結果のシャドウは （各ピクセルが期待値の±5%以内となるように）、 シャドウにぼかし半径の半分の標準偏差でガウスぼかしを適用した画像に近似しなければなりません。

注: 長い直線的なシャドウ端の場合、 blur半径で端から端まで約2×blur半径幅で色が変化（グラデーション）します。 シャドウ端内側はほぼ完全色、外側端はほぼ透明になります。

6.1.3. レイヤー・レイアウト・その他詳細

シャドウ効果は前面から背面へ適用され、 先頭シャドウが最前面、他は背面に重なります。 シャドウはレイアウトに影響せず、他のボックスやテキスト・そのシャドウと重なる場合があります。 stacking contextや描画順では、 外側box-shadowは要素の背景直下、 内側シャドウは要素の背景直上 （枠線や枠線画像より下）で描画されます。

特に指定がない限り、ドロップシャドウはprincipal boxにのみ適用されます。 影響を受けるボックスが複数フラグメントの場合、 シャドウはbox-decoration-breakで指定通り適用されます。

シャドウはスクロールをトリガーせず、スクロール可能領域のサイズも増やしません。

外側シャドウはcollapsing borderモデルの内部テーブル要素に効果ありません。 テーブルで行ごとに枠線厚みが異なる場合や、 行スパンセルが隣接セルと枠線厚みが異なる場合など、 そのシャドウ位置・描画方法は未定義です。

7. レベル

このセクションは参考情報です。 CSSには複数のレベルがあり、それぞれが他のレベルのサブセットです。 （詳細は [CSS-2017] を参照。） 以下のリストは、この仕様書のどの機能が各レベルに含まれているかを説明しています。

7.1. レベル1

• background-color
• background-image：画像は1つのみ（レイヤーなし）
• background-repeat：repeat | repeat-x | repeat-y | no-repeat のみ
• background-attachment：scroll | fixed のみ
• background-position：値は1つまたは2つのみ許可
• background ショートハンド：color, image, repeat, attachment, position のみ
• border-color プロパティ
• border-style プロパティ
• border-width プロパティ
• border-top、border-bottom、border-right、border-left、border ショートハンド

7.2. レベル2

• background-color
• background-image：画像は1つのみ（レイヤーなし）
• background-repeat：repeat | repeat-x | repeat-y | no-repeat のみ
• background-attachment：scroll | fixed のみ
• background-position：値は1つまたは2つのみ許可
• background：color, image, repeat, attachment, position のみ
• border-color プロパティ
• border-style プロパティ
• border-width プロパティ
• border-top、border-bottom、border-right、border-left、border ショートハンド

7.3. レベル3

• CSS Backgrounds and Borders Module Level 3で記載されている全ての機能

8. 変更点

8.1. 2023年2月14日候補勧告スナップショット以降の変更点

• background-positionのシリアライズを§ 2.6.1 background-position値のシリアライズで定義。 (Issue 2274)
• 変更点：<color>を<final-bg-layer>の先頭に移動を backgroundショートハンドで元に戻した。 (Issue 8496)
• 枠線幅のデバイスピクセルへの丸めを明記。 (Issue 7434)
• border-radiusと軸ごとのoverflowロングハンドの相互作用を明記。 (Issue 5210)
• background-imageの算出値ラインの誤り修正。 (Issue 8604)
• <box>定義を削除（<visual-box>参照に置換）。 Box Moduleがこれらの用語を定義済みのため。
• プロパティ定義表を最新の期待値に合わせて「アニメーション型」「論理プロパティグループ」を追加。
• 最新の値定義構文を使いプロパティ文法定義を整理。
• box-shadowの適用範囲定義を修正。 (Issue 9286)

8.2. 2020年12月22日候補勧告スナップショット以降の変更点

• ルートがボックスを生成しない場合背景が伝播しない規則は、 display: noneにのみ適用され、 display: contentsには適用されないことを明確化。 (Issue 3779)
• border-widthのthin、 medium、thickのサイズ定義を明確化。 (Issue 7254)
• 細かな編集改善。

8.3. 2017年10月17日候補勧告以降の変更点

• <shadow>文法の順序を逆転し、 ブラウザのシリアライズやtext-shadow/drop-shadow()に一致させた。 (Issue 2305)

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

• spread半径調整は角の曲率が増加する場合（減少の場合は適用せず）にのみ適用されるよう変更。 (Issue 1900)

  spread適用時にボックス形状維持のため、 シャドウの角半径もborder-box半径にspread距離を加算（内側は減算、ゼロ以上）する。 ただし角半径が小さい場合は鋭角維持のため （丸角と鋭角の連続性維持） border radiusがspread距離未満 （内側シャドウはspread距離の絶対値未満） の場合、spread距離は比率 1 + (r-1)³（r=border radius/spread距離）を掛けて角半径算出。

• <color> を<shadow>で省略した場合は currentColorがデフォルトになることを明確化。 (2766)

  色省略時は currentColorがデフォルト 使用色はcolorプロパティから取得

• プロパティ定義表の「アニメーション型」「算出値」ラインを整理・標準化。
• CSS bracketed range notation構文に変更し、 負値制限等のプローズ制約と一致するよう修正。
• 細かな編集改善。

8.4. 2014年9月9日候補勧告以降の変更点

この仕様書は2014年9月9日候補勧告以降に 以下の（非自明な）変更が加えられました：

• box-shadow: noneの定義追加。 （今まで誰も気づかなかったが、十分明白だったため。）
• <'background-color'>コンポーネントを <final-bg-layer>の先頭に移動（シリアライズ用）、 一部著者がこれを期待するため（論理的には不適切だが）。
• border-radiusのcollapsed-bordersテーブルへの効果を廃止。
• <position>を<bg-position>に戻した。 他のプロパティが3値構文を省略するため。

8.5. 2014年2月4日ラストコール草案以降の変更点

この仕様書は2014年2月4日ラストコール草案以降に 以下の（非自明な）変更が加えられました：

• spread半径およびmargin半径計算はspread/marginがborder radiusより大きい場合のみ調整係数を適用するよう修正。
• ルート要素がdisplay: noneの場合のキャンバス背景処理を定義。

全てのコメント対応一覧も利用可能です。

8.6. 2012年7月24日候補勧告以降の変更点

この仕様書は2012年7月24日候補勧告以降に 以下の（非自明な）変更が加えられました：

• <'background-clip'>および <'background-origin'>が backgroundショートハンドで他の要素値の間に分離して現れることを許容。 実装がそうなっているため。
• <color>および insetが box-shadowで任意順で現れることを許容。 曖昧性がなく、CSSは一般に曖昧でなければ順序のバリエーションを許容するため。
• シャドウ拡張曲率の段階的増加式定義（box-shadowのspread曲率）、 鋭角（border-radius = 0）と丸角（border-radius > spread distance）の連続性を確保。 中間値もより良い結果。
• margin edgeがborder-radiusに応じて曲がる定義追加。 （[CSS-SHAPES]にも関連するがCSS Backgrounds and Borders Level 3の適合性には影響なし）
• box-decoration-break削除。[CSS-BREAK-3]に移動。
• box-shadowのspread定義強化。
• border-styleがnoneの場合は 初期値のborder-image-widthもゼロになると明記 （border-image-widthは初期状態で算出値のborder-widthを使うが、この場合はゼロ）。
• background-attachment: localがスクロール時にどう影響するか明確化。
• background-positionの算出値をすべてのbackground-position値が補間可能であると明確化。
• 各プロパティ定義表に「アニメーション型」追加。

8.7. 2012年4月17日候補勧告以降の変更点

この仕様書は2012年4月17日候補勧告以降に 以下の（非編集的な）変更が加えられました：

• background-positionの算出値誤り修正： 算出値は位置のリストになる。
• border-radiusで インタラクティブ領域が減少する場合、ボックスの幅/高さを増やす必要がある場合がある旨注記追加。

8.8. 2012年2月14日「Last Call」ワーキングドラフト以降の変更点

この仕様書は2012年2月14日「Last Call」ワーキングドラフト以降に 以下の（非編集的な）変更が加えられました：

これらの変更はレビュー期間中に受けたコメントへの対応です。詳細はDisposition of Comments参照。

• 2.1節：このモジュールのどのプロパティが::first-lineや::first-letter疑似要素に適用されるかを定義。
• 3.4節：background-repeatの算出値定義の誤り修正。値は常にキーワード2つのペアで、単一キーワードにはならない。
• 3.10節：background-imageがbackgroundプロパティでリセットされるプロパティ一覧から漏れていたのを追加。
• 4.3節：border-widthで負の長さは無効である旨追加。
• 5.1節：border-radiusで負の長さは無効である旨追加。
• 6.8節：collapsed borderテーブルへのborder-imageの効果についてのセクション追加。描画方法は後日定義される旨も追加。

8.9. 2011年2月15日候補勧告以降の変更点

この仕様書は2011年2月15日候補勧告以降に 以下の変更が加えられました：

• 3.9節： background-sizeが2つauto値かつ画像に自然サイズがない場合の挙動を定義。

  両方がautoの場合は画像の自然な幅/高さがあればそれを使い 、不足する寸法（存在しない場合）は上記の通り‘auto’として振る舞う 。

• 5.4節： 角接合部での色・スタイルの遷移の中心を未定義（一定範囲内）に変更。前の定義が誤っていたため。

  隣接枠線間の色・スタイル遷移の中心は枠線幅比に比例する角度上の曲線点になる。例えば上下枠線幅が等しければ45°、上が右の2倍なら30°。遷移線はその角度の外弧点から内弧点まで描かれる。 枠線のいずれかがゼロ幅なら他方が遷移領域全体を占有する。それ以外の場合、隣接枠線間の色・スタイル遷移の中心は枠線幅比に比例しその比に関して連続な関数によって決まる。ただしこの遷移の見た目や「比例」が曲線上のどこに対応するかは定義されていない。

• 6.2節： スライス位置決定のため画像サイズ決定が必要な場合（SVGなど自然サイズなし）は先にサイズ決定するよう定義追加。

  画像サイズ決定が必要な場合（例：自然サイズなしSVG）はautoサイズ背景と同様にサイズ決定し、border image areaを背景配置領域の代わりにデフォルトオブジェクトサイズとして使う。

• 7.1節：box-decoration-breakによる影響にbidi強制改行を追加可。

  UAはbidi強制改行（双方向並び替えでインラインが不連続断片になるとき）にも‘box-decoration-break’で描画制御してよい。そうでなければ常に‘slice’で処理。

• 7.2節： box-shadowのデフォルト色定義追加。

  シャドウの色。 色省略時は‘color’プロパティ値を使用。

• 3.6節： background-positionの算出値明確化。

  1つまたは2つの値指定時は<length>なら絶対長さ、他はパーセンテージ。3つまたは4つならキーワード＋長さ/パーセンテージの組2つ。 原点を示すキーワード2つ＋原点からのオフセット2つ（絶対長さなら絶対長さ、他はパーセンテージ）。

  定義中のEquivalent→Computesに変更。
• 各プロパティ定義表に"アニメーション型"行追加。
• 3.6節： <position>生成式に名称変更（他仕様で再利用しやすくするため）＆文法を詳細化。

  bg-position<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の値テーブルにspaceキーワード追加。値一覧にはあったが文法定義に漏れていた。

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

• 5.5節： border-radius例の数学的誤り修正。

  高さ（2.5em）は指定半径（0.5em＋ 2.5em 2.0em ）に十分。

• 4.3節： border-widthのPercentages欄をN/Aに。プロパティに含まれないため。

8.10. 2009年12月17日候補勧告以降の変更点

この仕様書は2009年12月17日候補勧告以降に 以下の変更が加えられました：

• content-box値をbackground-clipに追加。
• backgroundショートハンドのbackground-clip・background-originの構文変更。
• border-radiusで曲線を生成する場合の色遷移にグラデーション推奨を削除。
• box-shadowプロパティ再追加。
• 各種明確化。

9. 謝辞

Tapas RoyはBorderモジュールの編集者でしたが、 後にBackgroundモジュールと統合されました。

Ben Stuckiには、隣接する2つの枠線の太さが異なる場合や一方がゼロの場合の 角丸挙動の定義に感謝します。 Arjan EisingとAnne van Kesterenにはborder-radius構文への貢献、 Zack Weinbergには角遷移領域の図、 Lea Verou、plinss、dbaronには角半径調整式への貢献 （特にLeaにはライブデモ提供に感謝）を。

枠線画像用プロパティ群はfantasaiが最初に提案しました。 現在の簡略化（一つの画像を9分割）はIan Hicksonによるものです。 （元々のアイデアは匿名のMicrosoftエンジニアによるようです。）

最後に、Brad Kemperにはドラフトの多くの機能に対するフィードバックと提案、 box-shadow例の全図作成、 そして枠線画像プロパティへの 大胆な変更提案（これにより従来定義の多くの問題が解決）に特別な謝意を表します。

10. プライバシーに関する考慮事項

この仕様は新しいプライバシー考慮事項を導入しません。

11. セキュリティに関する考慮事項

この仕様は新しいセキュリティ考慮事項を導入しません。