図式:
[
内容, ~padding, ~border, ~margin
]の区画を示す,~boxの模式図。 図式:
中央~寄せにされた背景~画像は、~borderの上から下にかけて,[
~paddingと内容
]の区画を貫くように繰返される。 図式:
背景が丸印で敷詰められる要素の画像 要素~内の画像~位置を示す図式 図式:
種々の~border~style例 想定される楕円を表す図式 図式:
太さが異なる~borderにおける隅の丸めによる効果
図式:
曲げられた隅は、左上~隅から,右上~隅を通り過ぎ,右下~隅にかけて軌跡を~~描き,四分~楕円の弧をなすが、
対辺~側には~borderの太さがあるので,~padding辺の曲線の端点は、外縁~弧の端点より縦横とも内に入った所から開始する。
図式:
曲った隅上の遷移~領域を説明する図 図式:
4 隅のうち対角に位置する 2 隅が小さく丸められ,残りの 2 隅が大きく丸められた矩形の画像 図式:~borderのための~tile 図式:菱形の~borderを伴う要素
オラオラオララッオラーオラ!オラオラーオラララッオラーオラオラオラオララッオラーオラ!オラオラオラララ!
図式:
~border画像は,波状で緑色の~borderを示す。
波の振幅は隅に近付く程 大きくなり,最後は孤立した緑色の円で蓋をされる。
画像は、各 側から 124px の所で 4 本の断線により, 9 片 —
124px 平方の 4 隅,
同じ幅で より短く切分けられた 4 側,
中心の小さな正方形
— に分割される。 図式:
画像が不在(~fallback)の下での描画は,緑色の二重線になり、~border画像による描画では、波状で緑色の~borderになり, 波の振幅は隅に近付く程 大きくなる。
4 隅の~tileは縦横 124px の正方形として描画され、辺側の~tileは,合間の空間を整数枚で埋め尽くすように,繰返される。
~tileは,振幅が最大の隅の所で~padding区画から深く伸びて見える。
~border画像~全体による効果は、波の谷間が~padding辺のちょうど外側に揃う様に, 31px ~outset-される。 図式:
横, 縦にそれぞれ 2 本ずつの,画像を横切る断線 図式:
上のコード例からは、[[
右上/左下
]隅は丸められず, [
左上/右下
]隅は楕円状に丸められ, 線幅 12px, 青色
]による~borderが伴われた, 100px 平方で, 背景が橙色の,~boxが作成される。
2 個の影が作成される:
~boxの左上に示されているものは、~offsetと拡幅により内影にされ,暗い橙色で, 20px 幅の(丸められた左上の~border形状に沿って曲がる)帯を作成する。
~~見かけ上,~boxの背後に見える外影は,
204px 平方で, ~boxと相似形の灰色~領域を作成し、~boxの[
上辺から下へ 24px, 左辺から右へ 24px
]~offsetされる。
外影に対する~blur半径 12px の適用により,影の色は淵に向かって次第に透明になる。
淵を辿っていくと, 24px 幅のぼかされた影の中心線が視覚的に露になる。
灰色の影を伴い, 角が丸められた~box —
影の形状は~border~boxと同じで,
~boxの直下から 10px 右, 10px 下へ~offsetされる。
灰色の影を伴い, 角が丸められた~box —
影の形状は~padding~boxの反転~形状になり,~boxの 上辺/左辺 (~borderの直ぐ内側)から 10px 内側の部分を埋める。
灰色の影を伴い, 角が丸められた~box —
影の形状は~border~boxより 20px 高く幅広で, 影の 上辺/左辺 が~boxの 上辺/左辺 の直下になるように~offsetされる。
灰色の影を伴い, 角が丸められた~box —
影の反転~形状は~padding~boxの形状より 20px 低く幅狭で,~boxの 上辺/左辺 (~borderの直ぐ内側)から 20px 内側の部分を埋める。
W3C

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

2015 年 8 月 14 日付 編集者草案

このバージョン
最新の編集者草案
https://drafts.csswg.org/css-backgrounds/
最新発行バージョン
http://www.w3.org/TR/css3-background/
以前のバージョン
http://www.w3.org/TR/2014/CR-css3-background-20140909/
最新の課題
GitHub
http://www.w3.org/Style/CSS/Tracker/products/11
編集
Bert Bos (W3C)
Elika J. Etemad / fantasai (Mozilla)
Brad Kemper (Invited Expert)
最新のテスト一式
http://test.csswg.org/suites/css3-background/nightly-unstable/
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

11. 参照文献

文献(規範)

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation.
http://www.w3.org/TR/2011/REC-CSS2-20110607
[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation.
http://www.w3.org/TR/1999/REC-html401-19991224
[XHTML11]
Murray Altheim; Shane McCarron. XHTML™ 1.1 - Module-based XHTML. 31 May 2001. W3C Recommendation.
http://www.w3.org/TR/2001/REC-xhtml11-20010531

文献(その他)

[CSS-2010]
Elika J. Etemad. Cascading Style Sheets (CSS) Snapshot 2010. 12 May 2011. W3C Working Group Note.
http://www.w3.org/TR/2011/NOTE-css-2010-20110512/
[CSS-SHAPES]
Vincent Hardy; Rossen Atanassov; Alan Stearns. CSS Shapes Module Level 1. 20 March 2014. W3C Candidate Recommendation. (Work in progress.)
http://www.w3.org/TR/2014/CR-css-shapes-1-20140320/
[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation.
http://www.w3.org/TR/2008/REC-CSS1-20080411
[CSS3-BREAK]
Rossen Atanassov; Elika J. Etemad. CSS Fragmentation Module Level 3. 14 January 2016. CR.
http://www.w3.org/TR/2015/WD-css3-break-20150129/
[CSS3-IMAGES]
Elika J. Etemad; Tab Atkins Jr. CSS Image Values and Replaced Content Module Level 3. 17 April 2012. W3C Candidate Recommendation. (Work in progress.)
http://www.w3.org/TR/2012/CR-css3-images-20120417/
[CSS3-TRANSITIONS]
Dean Jackson; et al. CSS Transitions. 19 November 2013. W3C Working Draft. (Work in progress.)
http://www.w3.org/TR/2013/WD-css3-transitions-20131119/
[CSS3COLOR]
Tantek Çelik; Chris Lilley; L. David Baron. CSS Color Module Level 3. 7 June 2011. W3C Recommendation.
http://www.w3.org/TR/2011/REC-css3-color-20110607
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation.
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.
http://www.w3.org/TR/2006/REC-xml11-20060816

プロパティ索引

【 この節の内容は省略(見出しクリックで巡回)。 】

索引

【 この節の内容は省略(ウィンドウ下端の索引機能を利用されたし)。 】