CSS 背景 & ボーダー モジュール Level 3

概要

CSS は画面や紙、音声など様々な媒体に対して HTML や XML など構造化された 文書 の描画や提供方法を指示する言語だ。この仕様は CSS3 (CSS Level 3) のうち、ボーダーと背景に関する機能を定義する。この仕様は、CSS2 [CSS21] の機能を含んだ上で拡張している (CSS2 もまた、CSS1 [CSS1] を拡張している)。CSS2 からの変更のうち特筆すべきは、画像によるボーダー指定、背景の複数指定、角を丸めたボックスの実現、ボックスに影を落とす表現の追加が挙げられる。

このモジュールは、過去に策定された CSS3 Backgrounds と CSS3 Border という2つの仕様を置き換えたものだ。

この文書のステータス

この章は、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

この文書は CSS Working Group により作成された勧告候補 (Candidate Recommendation) である。

勧告候補とは広くレビューがなされ実装段階に入った文書を指す。W3C はこの仕様の実装と、仕様に関するコメントの公開メーリングリスト www-style@w3.org (アーカイブ) への送信を奨励している (メーリングリストへの 参加手順 も参照されたい)。メールを送信する際には、“css3-background” を件名に含めていただきたい。たとえば “[css3-background] …コメントの要約…” といった形が望ましい。

勧告候補としての公開は、W3C Member による支持を意味するものではない。この文書は草案段階にあり、更新、置き換え、もしくは廃止される可能性もある。策定中であることを記さずに、この文書を参照することは適当ではない。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

‘box-decoration-break’ プロパティは at-risk として考えられ、実装者の関心が充分に寄せられない場合は CR 期間の終了後に仕様から外される可能性がある。

CSS WG はこのモジュールに関する issues list を公開している。CSS Backgrounds and Borders Level 3 の テストスイート については、勧告候補期間中に作成される。

目次

• 1. はじめに
• 2. 値
• 3. 背景のプロパティ
  • 3.1. 複数の背景レイヤー
  • 3.2. ‘background-color’ プロパティ
  • 3.3. ‘background-image’ プロパティ
  • 3.4. ‘background-repeat’ プロパティ
  • 3.5. ‘background-attachment’ プロパティ
  • 3.6. ‘background-position’ プロパティ
  • 3.7. ‘background-clip’ プロパティ
  • 3.8. ‘background-origin’ プロパティ
  • 3.9. ‘background-size’ プロパティ
  • 3.10. ‘background’ 短縮形プロパティ
  • 3.11. 特別な要素の背景
• 4. ボーダーのプロパティ
  • 4.1. ‘border-color’ プロパティ
  • 4.2. ‘border-style’ プロパティ
  • 4.3. ‘border-width’ プロパティ
  • 4.4. ボーダーの短縮形プロパティ
• 5. 角丸のプロパティ
  • 5.1. ‘border-radius’ プロパティ
  • 5.2. 角の形状
  • 5.3. 角のクリッピング
  • 5.4. 色とスタイルの変移
  • 5.5. カーブの重複
  • 5.6. テーブル要素での効果
• 6. 画像ボーダーのプロパティ
  • 6.1. ‘border-image-source’ プロパティ
  • 6.2. ‘border-image-slice’ プロパティ
  • 6.3. ‘border-image-width’ プロパティ
  • 6.4. ‘border-image-outset’ プロパティ
  • 6.5. ‘border-image-repeat’ プロパティ
  • 6.6. 画像ボーダーの描画プロセス
  • 6.7. ‘border-image’ 短縮形プロパティ
• 7. その他の効果
  • 7.1. ‘box-decoration-break’ プロパティ
  • 7.2. ‘box-shadow’ プロパティ
• 8. Definitions
  • 8.1. Glossary
  • 8.2. Conformance
  • 8.3. Levels
    • 8.3.1. CSS Level 1
    • 8.3.2. CSS Level 2
    • 8.3.3. CSS Level 3
  • 8.4. CR exit criteria
• 9. Changes Since the 17 December 2009 Candidate Recommendation
• 10. Acknowledgments
• 11. References
  • Normative references
  • Other references
• Property index
• Index

1. はじめに

このセクションは規範的ではない。

要素が CSS のボックスモデル [CSS21] によって描画されるとき、要素はまったく表示されないか、あるいは1つ以上の矩形ボックスとして整形される。各ボックスは矩形の内容領域、内容を囲むパディング、パディングの周りにあるボーダー、そしてボーダーの外側にあるマージンを持つ。(マージンは負の値を持つこともあるが、マージンは背景とボーダーには影響しない。)

この仕様で定義されるプロパティは、ボーダー領域、内容、パディング、ボーダー領域の背景を装飾する。また、‘box-shadow’ プロパティはボックスにドロップシャドウ効果を与える。

要素が複数のボックスに分割された場合、‘box-decoration-break’ が分割されたボックスに対しボーダーと背景のスタイルをどう適用するかを定義する。(要素は行や段組、ページをまたぐときに、複数のボックスに分割されることがある。)

背景やボーダー、影の重ね順についてもこのモジュールが定義する。重ね順が描画内容とどう関係するかについては、CSS 2.1 [CSS21] の付録 E “Elaborate description of Stacking Contexts” を参照されたい。

2. 値

この仕様で定義するプロパティの表記は CSS 2.1 [CSS21] の プロパティ表記 に倣う。

値 <color> は CSS3 Color [CSS3COLOR] が定義している。

値 <image> は、この仕様において <image> = <uri> と定義する。

これは、画像のスライスなど他の値を持てるように、将来的に他の仕様が <image> の定義を拡張する可能性があることを示唆している。

その他の値はすべて CSS 2.1 [CSS21] が定義する。

この仕様で定義するすべてのプロパティは、その値に inherit をとることができるが、仕様書の読みやすさを考慮し仕様書では記載していない。

3. 背景のプロパティ

ボックスは背景レイヤーを持つ。各レイヤーは透明 (規定) もしくは指定された色、あるいは1つ以上の画像によって描画される。背景関連プロパティには、背景色 (‘background-color’) や背景画像 (‘background-image’) を指定するものや、背景の大きさや配置、敷き詰め方を指定するものがある。

背景関連プロパティは継承されないが、‘background-color’ の初期値が ‘transparent’ であることから、親ボックスの背景が透過され表示されることになる。

3.1. 複数の背景レイヤー

CSS3 では、ボックスの背景が複数のレイヤーを持つことができる。レイヤーの数は ‘background-image’ プロパティに指定される、カンマで区切られた値の数により決定される。なお、値 ‘none’ も1つのレイヤーを生成することに注意されたい。

それぞれの背景画像は、他の背景関連プロパティによって、大きさが変更され、配置され、そして敷き詰められる。レイヤーが複数ある場合、各プロパティの最初の値から順に指定される。指定された値がレイヤーの数を超える場合、レイヤーの数を超えた値は利用されない。指定された値がレイヤーの数に満たない場合、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(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;

最初に指定された画像がユーザーに一番近いレイヤーになり、以降の画像は最初の画像の後ろに順に描画されていく。背景色が指定された場合、それは他のすべてのレイヤーの後ろに描画される。

画像ボーダー関連プロパティ も背景画像を定義できることに注意されたい。画像ボーダーで背景画像が定義された場合、その画像は背景関連プロパティで生成された背景の手前に描画される。

3.2. ‘background-color’ プロパティ

このプロパティは要素の背景色を指定する。背景色はすべての背景画像の後ろに描画される。

h1 { background-color: #F00 } /* 背景色を赤にする */

背景色は ‘background-clip’ プロパティの値と一番奥の背景画像によって切り抜かれる。

3.3. ‘background-image’ プロパティ

このプロパティは要素の背景画像を指定する。背景画像は最初に指定したものが一番上 (ユーザーの最も近く) に描画され、以降は指定した順に前の画像の背後に表示される。

<bg-image> = <image> | none

値 ‘none’ は画像レイヤーとして加算されるが、何も描画しない。空の画像 (幅や高さが0)、ダウンロードに失敗した画像、表示できない画像 (サポートされていない画像フォーマットなど) も同様にレイヤーを構成するが、これらも何も描画しない。

‘background-image’ が他のカンマ区切り値をとる背景関連プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

制作者は背景画像を指定する際、画像が表示できない場合でもテキストと背景のコントラストが保たれるよう ‘background-color’ も指定すべきである。

制作者は重要な情報を伝える際には、背景画像に依存した表現を利用すべきではない。これはアクセシビリティに関する事項であり、詳しくは Web Content Accessibility Guideline F3 [WCAG20] を参照されたい。要約すると、視覚的でない表現において画像はアクセシブルではなく、またハイコントラスト表示において背景画像は無効にされる可能性がある。

上記のガイドラインには 日本語訳 が存在する。あわせて参照されたい。

表象的な画像は、‘content’ プロパティを使うことで背景ではなく前景に表示できる。(しかしながら、意味的に重要な前景画像は、たとえば HTML における <img> のような文書マークアップで記述すべきだ。)

Media fragments によって、画像の一部分を表示するといったことが計画されている。また、CSS Images モジュールでは画像フォーマットが対応しない場合のフォールバック構文や、新しい画像表示に関する機能を提供する予定だ。

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

実装は、不透明な画像の後ろに描画されたものをはじめ、表示されない画像のダウンロードや描画をしないといった処理の最適化を行える。

3.4. ‘background-repeat’ プロパティ

このプロパティは背景画像が 拡大もしくは縮小 され、さらに 配置 された後に、どのように敷き詰められるかを指定する。

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

<repeat-style> に値が1つだけ指定された場合、それぞれの値は次の意味を持つ。

‘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’

画像は 背景配置領域 を覆うように可能な限り繰り返されるが、画像がすべて収まらない場合は切り抜かれず、空白が画像の間に入る。最初と最後の画像は背景配置領域の端に接する。背景描画領域が背景配置領域よりも大きい場合、背景画像は背景描画領域を覆うまで繰り返される。この方向に指定された ‘background-position’ の値は、画像を2つ並べるだけのスペースがない限り無視される。画像を2つ並べるスペースが無い場合、1つの画像だけが配置され、‘background-position’ がその方向を決定する。

‘round’

画像は 背景配置領域 を覆うように可能な限り繰り返される。しかし、画像が整数倍で収まらない場合、収まるように拡大もしくは縮小される。拡大縮小の仕組みについては ‘background-size’ を参照のこと。背景描画領域が背景配置領域よりも大きい場合、背景画像は背景描画領域を覆うまで繰り返される。

‘no-repeat’

画像は1つだけ配置され、その方向に繰り返されることはない。

2つあるキーワードの1つが ‘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
}

‘background-repeat’ が他のカンマ区切り値をとる背景関連プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.5. ‘background-attachment’ プロパティ

このプロパティは背景画像が指定されたとき、画像が viewport に対し固定配置される (‘fixed’) のか、要素とともにスクロールする (‘scroll’) のか、内容とともにスクロールする (‘local’) かを決定する。値は次の <attachment> がとりうるキーワードをカンマで区切り指定する。

<attachment> = scroll | fixed | local

fixed

背景は viewport に対し固定される。viewport のないページ媒体において ‘fixed’ が指定された背景は ページボックス に対し固定され、そしてすべてのページに複製される。1つの view に viewport は1つしかないことに注意されたい。要素がスクロール機構 (‘overflow’ プロパティ [CSS21] を参照) を備えていたとしても、‘fixed’ の指定された背景が要素とともに動くことはない。

local

背景は要素内容に対し固定される。要素がスクロール機構を備えている場合は、背景も要素内容と共にスクロールする。このとき、要素のボーダーの後ろにある背景も (存在する場合は) 同様にスクロールする (ボーダーが内容と共にスクロールしない場合もスクロールする)。しかし、‘background-attachment’ が ‘local’ であり、かつ要素内容がスクロールする場合、UA は ‘background-clip’ の ‘border-box’ を ‘padding-box’ として扱うことができる。

scroll

背景は要素そのものに固定され、内容と共にスクロールすることはない。(結果的に要素のボーダーと接することになる。)

画像が固定であっても、画像が要素の 背景描画領域 にある場合は表示される。それ以外の場合において、画像が切り取られることはない。(背景画像が切り取られない条件については “特別な要素の背景” を参照されたい。) つまり、敷き詰められない限り、その画像は見えない可能性がある。

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

ハードウェアプラットフォームの制約などから ‘fixed’ をサポートしない UA については、‘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;
}

‘background-attachment’ が他のカンマ区切り値をとる背景プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.6. ‘background-position’ プロパティ

このプロパティは、背景画像が指定された際に該当する 背景配置領域 の初期位置 (拡大縮小 後) を指定する。

値は次の通り。

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

指定された値が1つのみの場合、2番目の値に ‘center’ が与えられたものとして扱われる。2つの値が指定され、かつその1つ以上がキーワードでない場合、1番目の値は水平方向の位置 (オフセット) を、2番目の値は垂直方向の位置 (オフセット) を表す。ここでの <percentage> および <length> は、背景画像領域の左上から、背景画像の左上までのオフセットを表す。

3つもしくは4つの値が指定された場合、指定された <percentage> または <length> の前には、どの縁からのオフセットかを示すキーワードが存在しなくてはならない。たとえば、‘background-position: bottom 10px right 20px’ は下端から垂直方向に ‘10px’, 右端から水平方向に ‘20px’ の位置を表す。3つの値が指定された場合、残りの未指定となるオフセットは 0 として扱われる。

正の値は背景配置領域の端から内側に向かうオフセットを表す。負の値は背景配置領域の端から外側に向かうオフセットを表す。

 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-size’ によって与えられた値となる。

たとえば、‘0% 0%’ という値が指定された場合、画像の左上は基本的にボックスのパディングエッジの左上に沿う。‘100% 100%’ も同様に、画像の右下が領域の右下に沿う。‘75% 50%’ という値の場合、領域の横75％、縦50％の位置に、画像の左端から75％、上端から50％の位置が沿うことになる。

‘background-position: 75% 50%’ の図解。

<length>

長さはオフセットの固定長を与える。たとえば、‘2cm 1cm’ という2つの長さが与えられた場合、画像の左上は背景配置領域の左端より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

‘background-position’ が他のカンマ区切り値をとる背景プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.7. ‘background-clip’ プロパティ

このプロパティは、背景描画領域 を指定する。<box> の定義は次のとおり。

<box> = border-box | padding-box | content-box

値は次の意味を持つ。

‘border-box’

背景はボーダーボックスの範囲に描画される (限定される)。

‘padding-box’

背景はパディングボックスの範囲に描画される (限定される)。

‘content-box’

背景はコンテントボックスの範囲に描画される (限定される)。

ルート要素は異なる背景描画領域を持つため、‘background-clip’ プロパティが指定されても何の影響もないことに注意されたい。詳細は “特別な要素の背景” を参照のこと。

背景は常にボーダーの背後に描画されることに注意されたい。詳細は CSS 2.1 [CSS21] の “Elaborate description of Stacking Contexts” を参照のこと。

‘background-clip’ が他のカンマ区切り値をとる背景プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.8. ‘background-origin’ プロパティ

1つのボックスとして描画される要素において、このプロパティは 背景配置領域 を定義する。複数のボックスとして描画される要素 (行をまたぐインラインボックス、ページをまたぐボックスなど) においては、‘box-decoration-break’ に指定された値が背景配置領域の定義に影響する。

‘padding-box’

パディングボックスに沿って配置される。(1つのボックスの場合、‘0 0’ はパディングエッジの左上を、‘100% 100%’ はパディングエッジの右下を表す。)

‘border-box’

ボーダーボックスに沿って配置される。

‘content-box’

コンテントボックスに沿って配置される。

画像の ‘background-attachment’ に ‘fixed’ が指定された場合、このプロパティは何の効果ももたらさない。このときの背景配置領域は 初期コンテナブロック [CSS21] となる。

‘background-clip’ が ‘padding-box’, ‘background-origin’ が ‘border-box’, ‘background-position’ が ‘top left’ (初期値), そして要素が0ではないボーダーを持つ場合、背景画像の左と上が切り取られることに注意されたい。

‘background-origin’ が他のカンマ区切り値をとる背景プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.9. ‘background-size’ プロパティ

このプロパティは背景画像の大きさを指定する。<bg-size> の定義は次のとおり。

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

値は次の意味を持つ。

‘contain’

画像が 背景配置領域 内に最大の大きさで収まるよう、アスペクト比を保ちながら拡大もしくは縮小する。

‘cover’

画像が背景配置領域内を最小の大きさで完全に覆うよう、アスペクト比を保ちながら拡大もしくは縮小する。

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

1番目の値は画像の幅を、2番目の値は画像の高さを指定する。値が1つのみ指定された場合、2番目の値は ‘auto’ とみなされる。

パーセンテージは背景配置領域の大きさを参照する。

一辺の値に ‘auto’ が指定された場合、もう一辺の値と画像の内在寸法比から計算される。できない場合は、画像の内在寸法を利用する。それもできない場合は、100% として扱う。

どちらの辺にも ‘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 }

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’ に ‘round’ が1つもしくは2つ指定された場合、大きさの計算に次の処理が加わる。UA は ‘round’ が指定された方向の大きさを拡大もしくは縮小し、背景配置領域に整数倍で収まるようにしなければならない。次に記すのは幅を拡大縮小する際の処理となる (高さについても同様の計算が行われる)。

前述の計算によって導き出された画像の幅を X ≠ 0, W を背景配置領域の幅とする。このとき、拡大縮小後の値は X' = W / round(W / X) として計算される。なお、関数 round() は引数に一番近い自然数を返す関数を表す。

一辺のみ ‘background-repeat’ に ‘round’ が指定され、もう一辺の ‘background-size’ に ‘auto’ が指定される場合、さらに次の処理が加わる。‘background-size’ に ‘auto’ が指定された辺の大きさは、もとのアスペクト比を保持するように拡大もしくは縮小される。

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;
  background-size: auto 4em }

背景画像の幅もしくは高さが 0 と算出された場合、画像は表示されない。(これは、透明な画像が背景に指定されたと同じ効果を生ずる。)

‘background-size’ が他のカンマ区切り値をとる背景プロパティとどのように関わり、背景画像レイヤーを構成するかを知るには “複数の背景レイヤー” を参照されたい。

3.10. ‘background’ 短縮形プロパティ

値の内容は次のとおり。

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>

色の指定が <final-bg-layer> のみに許可され、<bg-layer> では指定できないことに注意されたい。

‘background’ は多くの背景プロパティをまとめて指定できる短縮形プロパティである。カンマで区切られた値の数によって、背景レイヤーの数が決定する。妥当な宣言において、この短縮形プロパティはまず各レイヤーの ‘background-color’, ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’, ‘background-attachment’ に初期値を指定してから、短縮形プロパティ中に明示的に指定した値で上書きする。最後に ‘background-color’ の指定が行われる。値が指定された場合はその値が、指定されていなければ初期値が適用される。

<box> となる値が1つだけ指定された場合、それは ‘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 auto;
    background-repeat: 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 10em;
    background-repeat: round 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 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 の背景となり、また 背景描画領域 は canvas 全体を覆うように広がるが、画像は大きさが決定され、かつルート要素に対しあたかもその要素のみが存在するかのように相対配置される。(つまり、背景配置領域はルート要素によって決定される。) ルート要素の ‘background-color’ は ‘transparent’ だが、canvas の背景色は UA 依存となる。ルート要素はこの背景を再描画することはない。つまり、背景の使用値は transparent のままである。

ルート要素が HTML の HTML 要素 [HTML401] もしくは XHTML の html 要素 [XHTML11] である文書において、ルート要素に指定された ‘background-image’ の計算値が ‘none’ であり、かつその ‘background-color’ が ‘transparent’ である場合、UA はルート要素ではなくその子要素である HTML の BODY 要素もしくは XHTML の body 要素が持つ背景関連プロパティの計算値を、ルート要素に伝播しなければならない。BODY 要素の計算値は各プロパティの初期値となり、伝播された値はルート要素に指定されたかのように扱われる。HTML 文書の制作者は canvas の背景スタイルを指定する場合、HTML 要素ではなく BODY 要素に指定することが望ましい。

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'>
<html>
  <head>
    <title>canvas の背景を指定</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>背景はマーブル模様です。</p>
  </body>
</html>

‘::first-line’ 擬似要素の背景は、インラインレベル要素に似た働きをする ([CSS21] の 5.12.1 を参照されたい)。つまり、最初の行が左揃えの場合、背景は必ずしも右マージンまで拡張されることはない。

4. ボーダーのプロパティ

ボーダーは定義済スタイル (実線、二重線、点線、擬似立体線など) もしくは画像により表現される。定義済スタイルの場合、ボーダーはスタイル (‘border-style’), 色 (‘border-color’), 太さ (‘border-width’) といった個々のプロパティから定義される。

4.1. ‘border-color’ プロパティ

これらのプロパティは、‘border-style’ プロパティで指定されたボーダーの前景色を指定する。

‘border-color’ は4つの ‘border-*-color’ の短縮形を表す。4つの値は上、右、下、左という順で指定する。左の値が欠けた場合は右と同じ値に、下の値が欠けた場合は上と同じ値に、そして右の値が欠けた場合は上と同じ値になる。

4.2. ‘border-style’ プロパティ

これらのプロパティはボーダーのスタイルを指定する。ただし、画像によるボーダー が指定されている場合、これらのプロパティは適用されない。

‘border-style’ は4つのプロパティの短縮形を表す。4つの値は上、右、下、左という順で指定する。左の値が欠けた場合は右と同じ値に、下の値が欠けた場合は上と同じ値に、そして右の値が欠けた場合は上と同じ値になる。

<border-style> に指定可能な値は次の通り。

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

各値の意味は次の通り。

‘none’

ボーダーなし。色と幅は無視される。(ボーダーが画像でない限り、ボーダーの幅は 0 になる。‘background-image’ も参照。)

‘hidden’

‘none’ と同等だが、ボーダーが折りたたまれた表において、ボーダーの衝突解決に関する処理が異なる [CSS21]。

‘dotted’

丸い点の連続。

‘dashed’

四角形の破線の連続。

‘solid’

実線。

‘double’

二重線。2つの実線が間隔を設け並行に通る。(それぞれの線の太さが指定されるのではなく、間隔を含めた線の幅が ‘border-width’ と等しくなければならない。)

‘groove’

彫り込まれたような効果。(大抵は ‘border-color’ より少し薄い色と濃い色の2色から「影」を生成することで表される。)

‘ridge’

浮き出ているような効果。

‘inset’

内容が沈んで見えるような効果。ボーダーが折りたたまれた表では ‘ridge’ として扱われる。[CSS21]

‘outset’

内容が浮き出て見えるような効果。ボーダーが折りたたまれた表では ‘groove’ として扱われる。[CSS21]

ボーダーは要素の背景の手前、要素内容の背後に描画される。

Note: 点や破線の間隔、破線の長さを制御することはできない。実装は角を対称にするよう間隔を調整することが奨励される。

Note: 本仕様では異なるスタイルのボーダーが角でどのように結合するかを定義しない。また、パディングが角丸の半径よりも小さい場合、丸められた角が要素内容とオーバーラップする可能性があることに注意されたい。

4.3. ‘border-width’ プロパティ

これらのプロパティは、ボーダーの太さを指定する。<border-width> に指定可能な値は次の通り。

<border-width> = <length> | thin | medium | thick

<length> には負の値を指定できない。キーワード ‘thin’, ‘medium’, ‘thick’ に対応する長さは定義されないが、値は 文書 内で一貫しており、また thin ≤ medium ≤ thick を満たす。たとえば、UA は フォントサイズ ‘medium’ が 17px 以下の場合、それぞれに 1px, 3px, 5px を割り当てることが考えられる。

‘border-width’ は4つの ‘border-*-width’ プロパティの短縮形を表す。4つの値は上、右、下、左という順で指定する。左の値が欠けた場合は右と同じ値に、下の値が欠けた場合は上と同じ値に、そして右の値が欠けた場合は上と同じ値になる。

Note: 初期値は ‘medium’ であるが、‘border-style’ の初期値が ‘none’ であるため、利用値は 0 となる。

‘border-width’ の利用値が 0 の場合、そのボーダーは不在 (absent) と呼ばれる。

4.4. ボーダーの短縮形プロパティ

このプロパティはボックスの上・右・下・左ボーダーについて、その幅・スタイル・色を指定する短縮形プロパティである。値が省略された場合は、初期値が指定される。

‘border’ プロパティは、ボックスの上下左右すべてのボーダーに対し、幅・色・スタイルを指定する短縮形プロパティである。‘margin’ や ‘padding’ とは異なり、‘border’ は上下左右にそれぞれ異なる値を指定することはできない。異なる値を指定したい場合は、別のプロパティを利用しなければならない。

‘border’ 短縮形プロパティはまた、‘border-image’ プロパティを初期値にリセットする。このことから、他の要素から継承されたボーダー関連のスタイル指定を上書きしたい場合、利用者は他の個別プロパティもしくは短縮形プロパティではなく ‘border’ を利用することが推奨される。こうすることにより、 ‘border-image’ についても継承されたスタイルをリセットし、新しいスタイルを与えることができる。

CSS Working Group は将来の CSS レベルで導入される他のボーダー関連プロパティについても、‘border’ によってスタイルが初期値にリセットされるように定義することを検討している。たとえば、もし文字グリフをボーダーとして指定する ‘border-characters’ が定義されたとしても、その値は ‘border’ で初期値にリセットされる。‘border’ 短縮形プロパティにボーダーをリセットするという目的を与えることで、将来導入されるプロパティがどんなものであっても、制作者は「空の canvas」を得る手法が保証されることになる。

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
}

5. 角丸のプロパティ

5.1. ‘border-radius’ プロパティ

‘border-*-radius’ プロパティは、ボックスの角における外ボーダーエッジのカーブを定義する四半楕円の径を定める (下の図版を参照)。四半楕円の径は、プロパティに与えられた2つの <length> もしくは <percentage> が定義する。1番目の値は水平方向の径に、2番目の値は垂直方向の径になる。2番目の値が欠けた場合は1番目の値がコピーされる。どちらかの値に 0 がある場合、角は丸くならず直角になる。水平方向の径に与えられたパーセンテージはボーダーボックスの幅から、垂直方向の径に与えられたパーセンテージはボーダーボックスの高さから決定される。

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

5.2. 角の形状

パディングエッジ (内ボーダー) の径は、外ボーダーの径と ‘border-width’ の差になる。値が負となる場合、内径は 0 になる。(このような状況においては、内ボーダーの中心と外ボーダーの中心が一致しないことがあるだろう。) 同様に、コンテントエッジの径はパディングエッジとパディングの差になり、値が負となる場合は 0 になる。カーブにおけるボーダーとパディングの大きさは、隣接する2辺から補完される。隣接するボーダーの太さが異なる場合、角のボーダーの太さは2辺がスムーズに結合するよう、段階的に変化する。

Note: つまり、外のカーブが隣接する角のパディングエッジを超えて広がる場合、内側の曲線は完全な四半楕円にならない可能性がある。

すべてのボーダースタイル (‘solid’, ‘dotted’, ‘inset’ など) はボーダーの曲線に沿って描画される。

5.3. 角のクリッピング

画像ボーダーのないボックスの背景は、角のカーブにしたがって適切に切り抜かれる (‘background-clip’ が影響する)。ボーダーまたはパディングエッジまでクリッピングする他の効果 (‘visible’ 以外の ‘overflow’ など) もまた、角のカーブに沿って切り抜かれる必要がある。置換要素の内容はコンテントエッジのカーブに沿って切り取られる。また、ボーダーエッジのカーブ外側にある領域において、その要素に関連するマウスイベントは受け付けない。

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

5.4. 色とスタイルの変移

色とスタイルの変移は、隣接するボーダーの径と内カーブの中心を含む、最小な矩形領域内で行われなければならない (‘border-radius’ が ‘border-width’ よりも小さい場合、カーブの中心はパディングエッジの角となる)。

ボーダーが結合する際に発生する色とスタイルの変移は、ボーダーの太さの比から求められる角度を中心点とする。たとえば、上と右のボーダーが同じ太さの場合、中心は水平から 45° の箇所にある。上が右よりも2倍の太さをもつ場合、中心は水平から 30° の箇所にある。変移の境界線は、外側のカーブおよび内側のカーブと、求められた角度との交点を結んだものになる。

遷移の見た目については定義しない。

5.5. カーブの重複

角のカーブは重なってはならない。隣接するボーダー径の和がボーダーボックスの大きさを上回る場合、UA はすべてのボーダー径が重複しなくなるまで、適切にその利用値を縮小させなければならない。径の縮小アルゴリズムは次の通り。

変数 f, i, L_i, S_i について、それぞれ 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 が掛けられ縮小される。

Note: この公式は四半円が四半円として存在し、また大きな径は小さな径よりも大きくあり続けることを保証するものである。しかし、充分に小さい角も小さくしてしまうため、同じように見えるべき近接要素のボーダーも異なるように見えることがある。

カーブがスクロールバーなど UI 要素に接するとき、UA は影響するボーダー径 (のみ) をさらに必要なところまで縮小させることができる。ただし、必要以上の縮小は認められない。

‘border-radius’ の値が縮小されたとしても、ボックスの描画はもともと指定されたものと全く同じでなければならない。

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. テーブル要素での効果

‘border-radius’ は ‘table’ や ‘inline-table’ にも適用される。‘border-collapse’ が collapse’ のとき、UA は ‘border-radius’ 関連プロパティを ‘table’ や ‘inline-table’ 要素に指定することができるが、これは必須ではない。この場合、隣接する角のボーダー径が重なってはいけないどころか、水平方向および垂直方向の角の径についてもセルの角の境界を超えて伸びてはならない (つまり、あるセルの角は他の角の ‘border-radius’ に影響してはならない)。もし ‘border-radius’ の計算値が影響する場合、テーブルに指定されたすべての ‘border-radius’ の仕様値に対し、交差もしくは関係する角のセルとの境界を超えることがなくなるまで、等しく縮小されなければならない。

表内部の要素 に ‘border-radius’ が与えられた時の効果は CSS3 Backgrounds and Borders では未定義であるが、将来の仕様で定義されるかもしれない。CSS3 UA は ‘border-collapse’ が ‘collapse’ であるとき、テーブル内部要素に適用される ‘border-radius’ を無視すべきである。

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

6. 画像ボーダーのプロパティ

制作者はボーダーのスタイルが適用される箇所に画像を指定することができる。このとき、ボーダーのデザインは ‘border-image-source’ で指定された画像の角と側面が利用される。指定された画像は 画像ボーダーの領域 に合うようにスライス、拡大縮小、変形が行われることがある。画像ボーダー関連プロパティはレイアウトには影響しない。ボックスのレイアウト、内容、周辺の内容は ‘border-width’ と ‘border-style’ のみを基とする。

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

    .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' をリセットする。 */
    }
  

6.1. ‘border-image-source’ プロパティ

このプロパティは ‘border-style’ で指定されるボーダースタイルの代わりに利用される画像を指定し、また新しい背景レイヤーを追加する。値が ‘none’ のときもしくは画像が表示できないときには画像ボーダーが表示されず、ボーダースタイルが利用される。

6.2. ‘border-image-slice’ プロパティ

‘border-image-slice’ に与えられた4つの値は、上、右、下、左の順で画像のオフセットを表し、このオフセットの値から画像を4つの角、4つの側面、そして中央からなる9つの領域にスライスする。‘fill’ キーワードが指定されない場合、中央の領域は破棄される (透明なものとして扱われる)。(画像は背景の上に描画される。詳細は 画像ボーダーの描画プロセス を参照されたい。)

4番目の値/パーセンテージが欠けた場合は2番目と同じ値に、3番目が欠けた場合は1番目と同じ値に、2番目が欠けた場合は1番目と同じ値になる。

<percentage>

パーセンテージは画像のサイズを参照する。つまり、画像の幅が水平方向のオフセットに、画像の高さが垂直方向のオフセットに影響する。

<number>

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

‘fill’

キーワード ‘fill’ が指定される場合、画像ボーダーの中心部も描画される。 (通常では中心部は省かれ、空として扱われる。)

負の値は認められない。また、画像の大きさよりも大きな値は ‘100%’ と解釈される。

‘border-image-slice’ の値によって与えられる領域は重なることがある。しかし、右と左の幅の和が画像の幅以上の場合、上辺と下辺および中央部の画像は空となり、空ではない透明な画像がそれらの箇所に指定された状態と同じ効果を与える。上と下の高さの和が画像の高さ以上の場合についても、同様の効果を与える。

6.3. ‘border-image-width’ プロパティ

画像ボーダーは 画像ボーダー領域 と呼ばれる区域の中に描画される。この領域の境界は、通常ではボーダーボックスとなる。詳細は ‘border-image-outset’ を参照されたい。

‘border-image-width’ に指定される4つの値は、この画像ボーダー領域を9つにスライスするオフセットを指定する。値は内向きの距離を上、右、下、左の順に指定する。4番目の値が欠けた場合は2番目と同じ値に、3番目が欠けた場合は1番目と同じ値に、2番目が欠けた場合は1番目と同じ値になる。値は次のような意味を持つ。

<percentage>

パーセンテージは画像のサイズを参照する。つまり、画像の幅が水平方向のオフセットに、画像の高さが垂直方向のオフセットに関係する。

<number>

数値は関連する ‘border-width’ (計算値) の倍数を表す。

‘auto’

‘auto’ が指定されたとき、画像ボーダーの幅は画像スライス中の該当箇所に内在する幅もしくは高さとなる (‘border-image-slice’ を参照)。画像が必須の内在寸法を持たないときは、該当する箇所の border-width が代わりに使用される。

Are percentages of the border-image area useful? Should percentages be used instead of numbers for ratios?

いかなる ‘border-image-width’ の値にも負の値を指定することは許されない。

2つの対になる ‘border-image-width’ のオフセットが重なるとき、‘border-image-slice’ の利用値は重ならなくなるまで等しく縮小される。数式では次のように表す。L_width が画像ボーダー領域の幅、L_height が画像ボーダー領域の高さ、W_side が側面 side における画像ボーダーの幅オフセットとして与えられるとき、f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)) とする。f < 1 のとき、すべての W には f が掛けられ縮小される。

6.4. ‘border-image-outset’ プロパティ

画像ボーダー領域がボーダーボックスをどこまで超えられるかを、上、右、下、左の順に指定する。4番目の値が欠けた場合は2番目と同じ値に、3番目が欠けた場合は1番目と同じ値に、2番目が欠けた場合は1番目と同じ値になる。数値は関連する ‘border-width’ の倍数を表す。

いかなる ‘border-image-outset’ の値にも負の値を指定することは許されない。

ボーダーボックスの外に描画される画像ボーダーについて、はみ出した部分がスクロールを発生させることはない。そのような部分はマウスイベントにも反応せず、また要素のイベントとしてキャプチャされることはない。

Note: スクロールを発生させることはないが、領域が親要素もしくは viewport によって切り抜かれることは引き続きある。

6.5. ‘border-image-repeat’ プロパティ

このプロパティはボーダー画像の周辺部と中心部がどのように拡大縮小するか、もしくはどのように並ぶかを指定する。2番目のキーワードが存在しない場合、1番目と同じ値が使用される。各キーワードの意味は次の通り。

‘stretch’

画像が伸縮し、領域を埋める。

‘repeat’

画像が敷き詰められ、領域を埋める。

‘round’

画像が敷き詰められ、領域を埋める。画像が整数倍で敷き詰められない場合は、画像を伸縮して敷き詰める。

‘space’

画像が敷き詰められ、領域を埋める。画像が整数倍で敷き詰められない場合は、画像の周りに隙間が設けられる。

正確な画像ボーダーの拡大縮小/敷き詰め処理は、次のセクションにて説明する。

6.6. 画像ボーダーの描画プロセス

‘border-image-source’ で指定された画像は ‘border-image-slice’ の値によってスライスされる。スライスされた9つの画像は次の4つのステップを経て、該当する画像ボーダーの区画領域に拡大縮小され、配置され、敷き詰められる。

1. ‘border-image-width’ に関する拡大縮小処理を行う。

   • 上と下に配置される画像は、画像ボーダー領域 で指定された区画の高さと同じになり、幅は比例して拡大もしくは縮小される。

   • 左と右に配置される画像は、画像ボーダー領域 で指定された区画の幅と同じになり、高さは比例して拡大もしくは縮小される。

   • 角に配置される画像は、画像ボーダーエッジの幅と高さと同じになり、拡大もしくは縮小される。

   • 中心部に配置される画像の幅は、上の画像と同じ係数で拡大もしくは縮小される。上の画像の係数が 0 もしくは無限大の場合は、下の画像の係数が代わりに利用される。どちらの条件も満たせない場合、幅は拡大も縮小もされない。同様に、中心部に配置される画像の高さは、左の画像と同じ係数で拡大もしくは縮小される。左の画像の係数が 0 もしくは無限大の場合は、右の画像の係数が代わりに利用される。どちらの条件も満たせない場合、高さは拡大も縮小もされない。

2. ‘border-image-repeat’ に関する拡大縮小処理を行う。

   • 1番目のキーワードが ‘stretch’ である場合、上、中心部、下の画像は 画像ボーダー領域 の中心部の幅と同じ大きさにさらに拡大もしくは縮小される。高さは変化しない。

   • 1番目のキーワードが ‘round’ である場合、上、中心部、下の画像は ‘background-repeat’ プロパティにおける ‘round’ と同じように、その幅が画像ボーダー領域の幅に整数倍でちょうど収まるように拡大もしくは縮小される。

   • 1番目のキーワードが ‘repeat’ もしくは ‘space’ である場合、上、中心部、下の画像はそれ以上変化しない。

   • 2番目のキーワードについて ‘stretch’, ‘round’, ‘repeat’, ‘space’ は1番目のキーワードと同様の働きを、左、中心部、右の画像と画像ボーダー領域の高さに対し行う。

3. 1番目の画像を敷く。

   • 1番目のキーワードが ‘repeat’ である場合、上、中心部、下の画像は該当する区画の水平中心に配置される。それ以外の場合、画像は画層ボーダー領域の該当する区画の左端に配置される。

   • 2番目のキーワードが ‘repeat’ である場合、左、中心部、右の画像は該当する区画の垂直中心に配置される。それ以外の場合、画像は画層ボーダー領域の該当する区画の上端に配置される。

4. 画像を敷き詰め描画する。

   • 画像は該当する区画を埋めるように敷き詰められる。すべての画像は標準ボーダーと同じスタッキングレベルに描画される。すなわち、背景レイヤーの直前に描画される。

   • キーワードが ‘space’ である場合、一枚全部を表示できない画像は破棄され、画像と画像の間に隙間が挿入される。(つまり、最初の画像の前、最後の画像の後、そして画像と画像の間に等しい隙間が設けられる。) これによって、側面に空の画像ボーダーがもたらされることもある。

6.7. ‘border-image’ 短縮形プロパティ

このプロパティは ‘border-image-source’, ‘border-image-slice’, ‘border-image-width’, ‘border-image-outset’, ‘border-image-repeat’ を指定する短縮形プロパティである。省略された値には、該当するプロパティの初期値が指定される。

7. その他の効果

7.1. ‘box-decoration-break’ プロパティ

ボックスがページの区切りやカラムの区切りによって、あるいはインライン要素が改行によって分割されることがある。このとき、‘box-decoration-break’ プロパティはその分割された個々のボックスが、1つの連続したボックスの一部であるか、もしくは個別のボックスとなりボーダーやパディングをそれぞれ持つかを指定する。また、背景についても 背景配置領域 がこれら複数のボックスからどのように導きだされ、そして背景がそれらの中にどう描画されるかがこのプロパティにより決定される。値は次の意味を持つ。

‘clone’

個々のボックスがそれぞれ独立したボーダーとパディングを持つ。‘border-radius’ と ‘border-image’、‘box-shadow’ がある場合は、それらは個別に適用される。背景は個々のボックスにそれぞれ描画される。背景画像が繰り返しなしと指定された場合も、それぞれのボックスに1つずつ描画される。

‘slice’

区切りにボーダーやパディングが挿入されない。境界に box-shadow’ が描画されることもない。‘border-radius’ も境界の角には適用されない。そして、‘border-image’ も、ボックスが分割されていないものと同じように描画される。表示としては、要素が区切りのない状態で描画されたのち、区切りの部分でスライスされたものとなる。

背景は、要素の配置が (均等割付、bidi 再配置、ページ区切りなども含め) 完了した後、すべての要素のボックスが視覚的な順序で並べられたかのように描画される。背景はもとのボックスの境界ボックスに適用され、その後ボックス全体における各ボックスの割合を勘案され背景が適用される。

行をまたぐボックスについては、まず同じ行にあるボックスが視覚的に結合される。その後、次の行にあるボックスが要素の書字方向とベースラインによって並べられる。たとえば、書字方向が左から右に流れるコンテナブロック (‘direction’ が ‘ltr’) の場合、最初のボックスは最初の行の一番左にあるボックスになり、次に続くボックスのラインはその右側に連なることになる。書字方向が右から左に流れるコンテナブロックの場合は、最初のボックスは最初の行の一番右にあるボックスとなり、次に続くボックスはそのラインの左側に連なることになる。

カラムをまたぐボックスについては、カラムが一続きの要素として扱われ、マルチカラム要素におけるブロックの流れる方向に沿い、各カラムが結合されたようになる。ページをまたがるボックスについては、ページの内容領域がルート要素におけるブロックの流れる方向に沿って結合されたようになる。これらの場合、各部分が異なる幅 (縦書きの場合は高さ) を持つ場合、各部分はすべての要素が同じ幅 (高さ) を持つように扱い背景を描画する。これにより、右寄せの画像は常に右端にならび、左寄せの画像は左端にならび、中央寄せの画像は中央にならぶことを保証できる。

インライン要素において、ボックスの区切りに面した箇所は、コンテナブロックの書字方向ではなく、その要素の書字方向によって決定する。たとえば、‘direction: rtl’ なインライン要素が ‘direction: ltr’ なブロック内にある場合、そのインライン要素は左端で区切られる。

7.2. ‘box-shadow’ プロパティ

‘box-shadow’ プロパティはボックスに1つ以上のドロップシャドウを適用する。このプロパティはカンマ区切りの <shadow> を指定する。1つの <shadow> は2～4の <length> と、<color> (任意) および ‘inset’ キーワード (任意) をとる。<length> が省かれた場合は 0 が、<color> が省かれた場合は UA の選んだ色が使われる。

<shadow> の定義は次の通り。

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

<shadow> の各コンポーネントは次のように解釈される。

• 1番目の <length> は水平方向における影のオフセットを示す。正の値はボックスの右側へ、負の値は左側へのオフセットになる。
• 2番目の <length> は垂直方向における影のオフセットを示す。正の値は下方向、負の値は上方向になる。
• 3番目の <length> はぼかしの半径を示す。負の値は認められない。値が 0 である場合、影のエッジはくっきり表示される。そうでない場合、値が大きくなればなるほど影のエッジがぼやける。
• 4番目の <length> はスプレッドの距離を示す。正の値が指定された場合、その距離だけ影の長さがすべての方向に対し拡張する。負の値が指定された場合、影は収縮する。内側の影について言うと、影を拡張することは影の外周からなる領域が収縮することになる。
• <color> は影の色を指定する。
• キーワード ‘inset’ が指定されたとき、ドロップシャドウ効果は外側 (浮き上がったような効果) から内側 (ボックスの領域が切り取られ、その奥に影があたったような効果) に切り替わる。

外側の影は要素のボーダーボックスが不透明であるかのように振舞う。また影はボーダーエッジの外側のみに描画され、その内側は切り取られる。

内側の影はパディングエッジの外側が不透明であるかのように振舞う。内側の影はパディングエッジの内側にのみ描画され、パディングボックスの外側は切り取られる。

ボックスが 0 でない ‘border-radius’ を持つ場合、影の形状も同じように丸くなる。‘border-image’ は ‘box-shadow’ の形状には影響しない。

スプレッドが与えられると、影は拡張もしくは収縮する。次に記すぼかし処理にスプレッドの絶対値が反映され、さらに次に記す調整と等価な処理が行われる。正のスプレッドにおいては、ぼかし処理の結果からすべての透過されていないピクセルが影に指定された色と同じであるように調整される。負のスプレッドにおいては、ぼかし処理の結果からすべての不透過でないピクセルが透過されるように調整される。UA は、もとの影の外周から指定された距離分だけ垂直方向に伸ばした形状を得るという概算を行える。UA ははっきりした影のエッジを与えられた距離分だけ伸長 (内側の影の場合はは伸縮) して変形された影の外周からなる形状を得るという概算も行える。(UA はこれらの方法を組み合わせ、外側には一方の手法を、内側にはもう一方の手法を利用することもできる。) しかし、‘border-radius’ が 0 の角については、角はくっきりしたままでなければならない。これは影の形状を拡大縮小する処理においても等価である。どのような場合でも、影からなる形状の実質的な幅と高さの最小値は 0 となる。(大きさが 0 の影は外側の影を見えなくさせ、内側の影はパディングボックスを覆う。)

ぼかしの距離が 0 でない場合、描画される影はガウスフィルタなどによりぼかされることを意味する。ぼかしのアルゴリズムは定義しないが、描画される影は標準偏差がぼかしの半径の半分に等しいガウスぼかしを影に適用した結果と近似 (各ピクセルにおいて想定値の 5% 以内) していなければならない。

長くはっきりした影のエッジにおいて、エッジから外側・内側にぼかしの半径分を垂直方向にとった領域内で、視覚的に区別できる色の遷移が行われることを意味する。遷移は、影の内側にある視点から外側にある終点において、プロパティに指定された色から透明に変化する。

影の効果は正面から背後に向かって適用される。1番目の影が最も手前にあり、以降の影は前の影の背後に描画される。影はレイアウトに影響せず、また他のボックスやそれらの影と重なることがある。stacking contextと描画の順番により、外側の影は要素の背景の背後に描画され、内側の影は背景の手前 (ボーダーや画像ボーダーの背後) に描画される。

要素が複数のボックスを持つ場合、全てのボックスにドロップシャドウが適用される。しかし、影はボーダーが描画される箇所にのみ描画される。これについては ‘box-decoration-break’ を参照されたい。

影はスクロールを発生させることもなければ、スクロール可能な領域を広げることもない。

次は青いボーダーを持つオレンジ色のボックスにドロップシャドウを適用した例だ。

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

‘box-shadow’ プロパティは ‘::first-letter’ 擬似要素に適用されるが、‘::first-line’ 擬似要素には適用されない。ボーダーの折りたたまれた表内部要素において、外側の影は何の効果も適用しない。太さが複数ある折りたたまれたボーダーのモデルにおいて影がひとつのボーダーエッジに定義される場合 (テーブル内である行のボーダーが他の行よりも古いようなテーブルに外側の影を与えた場合や、異なるボーダーの太さをもち行をまたいだセルに内側の影を与えた場合) 、その影の位置や描画は未定義となる。

8. Definitions

8.1. Glossary

The following terms and abbreviations are used in this module.

UA

User Agent

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

document

A tree-structured document with elements and attributes, such as an SGML or XML document [XML11].

style sheet

A CSS style sheet.

8.2. Conformance

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Conformance to CSS Backgrounds and Borders Level 3 is defined for three classes:

style sheet

A CSS style sheet.

renderer

A UA that interprets the semantics of a style sheet and renders documents that use them.

authoring tool

A UA that writes a style sheet.

A style sheet is conformant to CSS Backgrounds and Borders Level 3 if all of its declarations that use properties defined in this module have values that are valid according to the generic CSS grammar and the individual grammars of each property as given in this module.

A renderer is conformant to CSS Backgrounds and Borders Level 3 if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the properties defined by CSS Backgrounds and Borders Level 3 by parsing them correctly and rendering the document accordingly. However the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to CSS Backgrounds and Borders Level 3 if it writes syntactically correct style sheets, according to the generic CSS grammar and the individual grammars of each property in this module.

8.3. Levels

This section is informative. CSS has different levels of features, each a subset of the other. (See [CSSBEIJING] for a full explanation.) The lists below describe which features from this specification are in each level.

8.3.1. CSS Level 1

• ‘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

8.3.2. CSS 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’: 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

8.3.3. CSS Level 3

• All features described in the CSS Backgrounds and Borders Module Level 3

8.4. CR exit criteria

As described in the W3C process document, a Candidate Recommendation (CR) is a specification that W3C recommends for use on the Web. The next stage is “Recommendation,” when the specification is sufficiently implemented.

For this specification to be proposed as a W3C Recommendation, the following conditions shall be met. There must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:

independent

each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.

interoperable

passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.

implementation

a user agent which:

1. implements the specification.
2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or “nightly build”). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
3. is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward).

A minimum of sixth months of the CR period must have elapsed. This is to ensure that enough time is given for any remaining major errors to be caught.

Features will be dropped if two or more interoperable implementations are not found by the end of the CR period.

Features may/will also be dropped if adequate/sufficient (by judgment of CSS WG) tests have not been produced for those feature(s) by the end of the CR period.

9. Changes Since the 17 December 2009 Candidate Recommendation

The following changes were made to this specification since the 17 December 2009 Candidate Recommendation:

• Addition of ‘content-box’ value of ‘background-clip’.
• Change to the ‘background’ shorthand syntax for ‘background-clip’ and ‘background-origin’.
• Removal of recommendation to use gradients for color transitions when ‘border-radius’ produces a curve.
• (Re)Addition of ‘box-shadow’ property.
• Various clarifications.

10. Acknowledgments

Tapas Roy was editor of the Border Module, before it was merged with the Background Module.

Thanks to Ben Stucki for defining what happens with rounded corners if the two adjoining borders are of unequal thickness or one of them is zero; to Arjan Eising and Anne van Kesteren for the ‘border-radius’ syntax; to Zack Weinberg for the corner transition regions diagram.

A set of properties for border images was initially proposed by fantasai. The current simplification (one image cut into nine parts) is due to Ian Hickson. (Though the original idea seems to originate with some anonymous Microsoft engineers.)

Finally, special thanks go to Brad Kemper for his feedback and suggestions for many of the features in the draft, for drawing all the box-shadow examples, and for proposing some radical changes to the ‘border-image’ property that solved a number of problems with the earlier definition.

11. References

Normative references

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 8 September 2009. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2009/CR-CSS2-20090908

[CSS3COLOR]

Tantek Çelik; Chris Lilley; L. David Baron. CSS Color Module Level 3. 28 October 2010. W3C Proposed Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2010/PR-css3-color-20101028

[HTML401]

David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[RFC2119]

S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

[XHTML11]

Murray Altheim; Shane McCarron. XHTML™ 1.1 - Module-based XHTML. 31 May 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-xhtml11-20010531

Other references

[CSS1]

Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411

[CSSBEIJING]

Elika J. Etemad. Cascading Style Sheets (CSS) Snapshot 2007. 27 July 2010. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2010/WD-css-beijing-20100727

[WCAG20]

Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211

[XML11]

Eve Maler; et al. Extensible Markup Language (XML) 1.1 (Second Edition). 16 August 2006. W3C Recommendation. URL: http://www.w3.org/TR/2006/REC-xml11-20060816

Property index

Index

• <attachment>, 3.5.
• authoring tool, 8.2.
• ‘auto’
  • ‘background-size’ value, 3.9.
  • ‘border-image-width’ value, 6.3.
• background, 3.10.
• background-attachment, 3.5.
• background-clip, 3.7.
• background-color, 3.2.
• background-image, 3.3.
• background-origin, 3.8.
• background painting area, 3.7.
• background painting area., 3.4.
• background-position, 3.6.
• background positioning area., 3.9.
• background positioning area, 3.8., 3.4., 7.1.
• background positioning area, 3.6.
• background-repeat, 3.4.
• background-size, 3.9.
• <bg-image>, 3.3.
• <bg-layer>, 3.10.
• <bg-position>, 3.6.
• <bg-size>, 3.9.
• border, 4.4.
• border-bottom, 4.4.
• border-bottom-color, 4.1.
• border-bottom-left-radius, 5.1.
• border-bottom-right-radius, 5.1.
• border-bottom-style, 4.2.
• border-bottom-width, 4.3.
• ‘border-box’
  • ‘background-clip’ value, 3.7.
  • ‘background-origin’ value, 3.8.
• border-color, 4.1.
• border-image, 6.7.
• border image area, 6.4.
• border-image-outset, 6.4.
• border-image-repeat, 6.5.
• border-image-slice, 6.2.
• border-image-source, 6.1.
• border-image-width, 6.3.
• border-left, 4.4.
• border-left-color, 4.1.
• border-left-style, 4.2.
• border-left-width, 4.3.
• border-radius, 5.1.
• border-right, 4.4.
• border-right-color, 4.1.
• border-right-style, 4.2.
• border-right-width, 4.3.
• <border-style>, 4.2.
• border-style, 4.2.
• border-top, 4.4.
• border-top-color, 4.1.
• border-top-left-radius, 5.1.
• border-top-right-radius, 5.1.
• border-top-style, 4.2.
• border-top-width, 4.3.
• <border-width>, 4.3.
• border-width, 4.3.
• ‘bottom’
  • ‘background-position’ value, 3.6.
• <box>, 3.7.
• box-decoration-break, 7.1.
• box-shadow, 7.2.
• ‘center’
  • ‘background-position’ value, 3.6.
• ‘clone’, 7.1.
• color
  • background, 3.2.
• <color>, 2.
• ‘contain’, 3.9.
• ‘content-box’, 3.8.
  • ‘background-clip’ value, 3.7.
• ‘cover’, 3.9.
• ‘dashed’, 4.2.
• document, 8.1.
• documents, 8.1.
• ‘dotted’, 4.2.
• ‘double’, 4.2.
• ‘fill’, 6.2.
• <final-bg-layer>, 3.10.
• fixed, 3.5.
• ‘fixed’, 3.5.
• ‘groove’, 4.2.
• ‘hidden’, 4.2.
• <image>, 2.
• ‘inset’, 4.2.
• layers, 3.1.
• ‘left’
  • ‘background-position’ value, 3.6.
• local, 3.5.
• ‘local’, 3.5.
• ‘none’
  • ‘background-image’ value, 3.3.
  • ‘border-image-source’ value, 6.1.
  • ‘border-style’ value, 4.2.
• ‘no-repeat’
  • ‘background-repeat’ value, 3.4.
• ‘outset’, 4.2.
• ‘padding-box’
  • ‘background-clip’ value, 3.7.
  • ‘background-origin’ value, 3.8.
• renderer, 8.2.
• ‘repeat’
  • ‘background-repeat’ value, 3.4.
  • ‘border-image-repeat’ value, 6.5.
• <repeat-style>, 3.4.
• ‘repeat-x’, 3.4.
• ‘repeat-y’, 3.4.
• ‘ridge’, 4.2.
• ‘right’
  • ‘background-position’ value, 3.6.
• ‘round’
  • ‘background-repeat’ value, 3.4.
  • ‘border-image-repeat’ value, 6.5.
• scroll, 3.5.
• ‘scroll’, 3.5.
• <shadow>, 7.2.
• ‘slice’, 7.1.
• ‘solid’, 4.2.
• ‘space’
  • ‘background-repeat’ value, 3.4.
  • ‘border-image-repeat’ value, 6.5.
• ‘stretch’, 6.5.
• style sheet, 8.1.
  • as conformance class, 8.2.
• ‘top’
  • ‘background-position’ value, 3.6.
• UA, 8.1.
• User Agent, 8.1.
• viewport, 3.5.