You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5313 lines
177 KiB
5313 lines
177 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>CSS Backgrounds and Borders Module Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
.prod { font-family: inherit; font-size: inherit }
|
|
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
|
|
code { font-size: inherit; }
|
|
#box-shadow-samples td { background: white; color: black; }
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Backgrounds and Borders Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Candidate Recommendation
|
|
15 February 2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
|
|
<!-- <a href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a> -->
|
|
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>
|
|
|
|
|
|
<dt>Previous versions:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2010/WD-css3-background-20100612">http://www.w3.org/TR/2010/WD-css3-background-20100612</a>
|
|
|
|
|
|
<dt id=editors-list>Editors:
|
|
|
|
<dd><a href="mailto:bert@w3.org">Bert Bos</a> (<a
|
|
href="http://www.w3.org/">W3C</a>)
|
|
|
|
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
|
|
(Invited Expert)
|
|
|
|
<dd><a href="mailto:brad.kemper@gmail.com">Brad Kemper</a> (Invited
|
|
Expert)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>CSS is a language for describing the rendering of structured <a
|
|
href="#document">documents</a> (such as HTML and XML) on screen, on paper,
|
|
in speech, etc. This draft contains the features of CSS level 3
|
|
relating to borders and backgrounds. It includes and extends the
|
|
functionality of CSS level 2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
|
|
level 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
|
|
The main extensions compared to level 2 are borders consisting of
|
|
images, boxes with multiple backgrounds, boxes with rounded corners and
|
|
boxes with shadows.
|
|
|
|
<p>This module replaces two earlier drafts: CSS3 Backgrounds and CSS3
|
|
Border.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> as a <a
|
|
href="http://www.w3.org/Consortium/Process/tr#RecsCR">Candidate
|
|
Recommendation.</a>
|
|
|
|
<p>A Candidate Recommendation is a document that has been widely reviewed
|
|
and is ready for implementation. W3C encourages everybody to implement
|
|
this specification and return comments to the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a
|
|
href="mailto:www-style@w3.org?Subject=%5Bcss3-background%5D%20PUT%20SUBJECT%20HERE">
|
|
www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>). When sending
|
|
e-mail, please put the text “css3-background” in the subject,
|
|
preferably like this: “[<!---->css3-background<!---->]
|
|
<em>…summary of comment…</em>”
|
|
|
|
<p>Publication as a Candidate Recommendation does not imply endorsement by
|
|
the W3C Membership. This is a draft document and may be updated, replaced
|
|
or obsoleted by other documents at any time. It is inappropriate to cite
|
|
this document as other than work in progress.
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">
|
|
Essential Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">
|
|
section 6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>The following features are at-risk and may be dropped at the end of the
|
|
CR period if there has not been enough interest from implementers:
|
|
‘<a href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’
|
|
|
|
<p>The CSS WG maintains an <a
|
|
href="http://www.w3.org/Style/CSS/Tracker/products/11">issues list</a> for
|
|
this module. A <a href="http://www.w3.org/Style/CSS/Test/">test suite</a>
|
|
and implementation report for CSS Backgrounds and Borders Level 3 will be
|
|
developed during the Candidate Recommendation phase, which will last a
|
|
minimum of three months, i.e., at least until 15 May 2011. See the section
|
|
<a href="#exit">“CR exit criteria”</a> for more details.
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#values"><span class=secno>2. </span>Values</a>
|
|
|
|
<li><a href="#backgrounds"><span class=secno>3. </span>Background
|
|
properties</a>
|
|
<ul class=toc>
|
|
<li><a href="#layering"><span class=secno>3.1. </span>Layering multiple
|
|
background images</a>
|
|
|
|
<li><a href="#the-background-color"><span class=secno>3.2. </span>The
|
|
‘<code class=property>background-color</code>’ property</a>
|
|
|
|
|
|
<li><a href="#the-background-image"><span class=secno>3.3. </span>The
|
|
‘<code class=property>background-image</code>’ property</a>
|
|
|
|
|
|
<li><a href="#the-background-repeat"><span class=secno>3.4. </span>The
|
|
‘<code class=property>background-repeat</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-background-attachment"><span class=secno>3.5.
|
|
</span>The ‘<code
|
|
class=property>background-attachment</code>’ property</a>
|
|
|
|
<li><a href="#the-background-position"><span class=secno>3.6. </span>The
|
|
‘<code class=property>background-position</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-background-clip"><span class=secno>3.7. </span>The
|
|
‘<code class=property>background-clip</code>’ property</a>
|
|
|
|
<li><a href="#the-background-origin"><span class=secno>3.8. </span>The
|
|
‘<code class=property>background-origin</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-background-size"><span class=secno>3.9. </span>The
|
|
‘<code class=property>background-size</code>’ property</a>
|
|
|
|
<li><a href="#the-background"><span class=secno>3.10. </span>The
|
|
‘<code class=property>background</code>’ shorthand
|
|
property</a>
|
|
|
|
<li><a href="#special-backgrounds"><span class=secno>3.11. </span>The
|
|
backgrounds of special elements</a>
|
|
</ul>
|
|
|
|
<li><a href="#borders"><span class=secno>4. </span>Border properties</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-border-color"><span class=secno>4.1. </span>The
|
|
‘<code class=property>border-color</code>’ properties</a>
|
|
|
|
<li><a href="#the-border-style"><span class=secno>4.2. </span>The
|
|
‘<code class=property>border-style</code>’ properties</a>
|
|
|
|
<li><a href="#the-border-width"><span class=secno>4.3. </span>The
|
|
‘<code class=property>border-width</code>’ properties</a>
|
|
|
|
<li><a href="#the-border-shorthands"><span class=secno>4.4. </span>The
|
|
border shorthand properties</a>
|
|
</ul>
|
|
|
|
<li><a href="#corners"><span class=secno>5. </span>Rounded Corners</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-border-radius"><span class=secno>5.1. </span>The
|
|
‘<code class=property>border-radius</code>’ properties </a>
|
|
|
|
|
|
<li><a href="#corner-shaping"><span class=secno>5.2. </span>Corner
|
|
Shaping</a>
|
|
|
|
<li><a href="#corner-clipping"><span class=secno>5.3. </span>Corner
|
|
Clipping</a>
|
|
|
|
<li><a href="#corner-transitions"><span class=secno>5.4. </span>Color
|
|
and Style Transitions</a>
|
|
|
|
<li><a href="#corner-overlap"><span class=secno>5.5. </span>Overlapping
|
|
Curves</a>
|
|
|
|
<li><a href="#border-radius-tables"><span class=secno>5.6. </span>Effect
|
|
on Tables</a>
|
|
</ul>
|
|
|
|
<li><a href="#border-images"><span class=secno>6. </span>Border Images</a>
|
|
|
|
<ul class=toc>
|
|
<li><a href="#the-border-image-source"><span class=secno>6.1. </span>The
|
|
‘<code class=property>border-image-source</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-border-image-slice"><span class=secno>6.2. </span>The
|
|
‘<code class=property>border-image-slice</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-border-image-width"><span class=secno>6.3. </span>The
|
|
‘<code class=property>border-image-width</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-border-image-outset"><span class=secno>6.4. </span>The
|
|
‘<code class=property>border-image-outset</code>’
|
|
property</a>
|
|
|
|
<li><a href="#the-border-image-repeat"><span class=secno>6.5. </span>The
|
|
‘<code class=property>border-image-repeat</code>’
|
|
property</a>
|
|
|
|
<li><a href="#border-image-process"><span class=secno>6.6.
|
|
</span>Border-image drawing process</a>
|
|
|
|
<li><a href="#the-border-image"><span class=secno>6.7. </span>The
|
|
‘<code class=property>border-image</code>’ shorthand</a>
|
|
</ul>
|
|
|
|
<li><a href="#misc"><span class=secno>7. </span>Miscellaneous Effects</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-box-decoration-break"><span class=secno>7.1.
|
|
</span>The ‘<code
|
|
class=property>box-decoration-break</code>’ property</a>
|
|
|
|
<li><a href="#the-box-shadow"><span class=secno>7.2. </span>The
|
|
‘<code class=property>box-shadow</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#definitions"><span class=secno>8. </span>Definitions</a>
|
|
<ul class=toc>
|
|
<li><a href="#glossary"><span class=secno>8.1. </span>Glossary</a>
|
|
|
|
<li><a href="#conformance"><span class=secno>8.2. </span>Conformance</a>
|
|
|
|
|
|
<li><a href="#levels"><span class=secno>8.3. </span>Levels</a>
|
|
<ul class=toc>
|
|
<li><a href="#level-1"><span class=secno>8.3.1. </span>CSS Level 1</a>
|
|
|
|
|
|
<li><a href="#level-2"><span class=secno>8.3.2. </span>CSS Level 2</a>
|
|
|
|
|
|
<li><a href="#level-3"><span class=secno>8.3.3. </span>CSS Level 3</a>
|
|
|
|
</ul>
|
|
|
|
<li><a href="#exit"><span class=secno>8.4. </span>CR exit criteria</a>
|
|
</ul>
|
|
|
|
<li><a href="#changes"><span class=secno>9. </span>Changes Since the 17
|
|
December 2009 Candidate Recommendation</a>
|
|
|
|
<li><a href="#acknowledgments"><span class=secno>10.
|
|
</span>Acknowledgments</a>
|
|
|
|
<li><a href="#references"><span class=secno>11. </span>References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>When elements are rendered according to the <a
|
|
href="http://www.w3.org/TR/CSS21/box.html">CSS box model</a> <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, each element
|
|
is either not displayed at all, or formatted as one or more rectangular
|
|
boxes. Each box has a rectangular content area, a band of padding around
|
|
the content, a border around the padding, and a margin outside the border.
|
|
(The margin may actually be negative, but margins have no influence on the
|
|
background and border.)
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram of a typical box, showing the content, padding,
|
|
border and margin areas" src=box>
|
|
|
|
<p class=caption>The various areas and edges of a typical box. (This
|
|
diagram is explained in the CSS2.1 Box Model chapter <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.)
|
|
</div>
|
|
|
|
<p>The properties of this module deal with the decoration of the border
|
|
area and with the background of the content, padding and border areas.
|
|
Additionally the box may be given a "drop-shadow" effect with the
|
|
‘<a href="#box-shadow"><code
|
|
class=property>box-shadow</code></a>’ property.
|
|
|
|
<p>If an element is broken into multiple boxes, ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’ defines how the
|
|
borders and background are divided over the various boxes. (An element can
|
|
result in more than one box if it is broken at the end of a line, at the
|
|
end of a column or at the end of a page; and continued in the next line,
|
|
column or page.)
|
|
|
|
<p>The relative stacking order of backgrounds, borders, and shadows is
|
|
given in this module. For how these layers interact with other rendered
|
|
content, see Appendix E “Elaborate description of Stacking Contexts”
|
|
in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<h2 id=values><span class=secno>2. </span>Values</h2>
|
|
|
|
<p>This specification follows the <a
|
|
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
|
|
definition conventions</a> from <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<p><dfn id=ltcolorgt><var><color></var></dfn> values are defined in
|
|
CSS Color Level 3 <a href="#CSS3COLOR"
|
|
rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>.
|
|
|
|
<p><dfn id=ltimagegt><var><image></var></dfn> values are defined by
|
|
this specification as <code class=prod><a
|
|
href="#ltimagegt"><var><image></var></a> =
|
|
<var><uri></var></code>.
|
|
|
|
<p class=note>A future specification may expand the definition of <a
|
|
href="#ltimagegt"><var><image></var></a> to allow other values,
|
|
e.g., to define image slices.
|
|
|
|
<p>All other values are defined in CSS Level 2 Revision 1 <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<p>All properties defined in this specification also accept the <a
|
|
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
|
|
keyword as their property value, but for readability it has not been
|
|
listed explicitly.
|
|
|
|
<h2 id=backgrounds><span class=secno>3. </span>Background properties</h2>
|
|
|
|
<p>Each box has a background layer that may be fully transparent (the
|
|
default), or filled with a color and/or one or more images. The background
|
|
properties specify what color (‘<a href="#background-color"><code
|
|
class=property>background-color</code></a>’) and images (‘<a
|
|
href="#background-image"><code
|
|
class=property>background-image</code></a>’) to use, and how they
|
|
are sized, positioned, tiled, etc.
|
|
|
|
<p>The background properties are not inherited, but the parent box's
|
|
background will shine through by default because of the initial
|
|
‘<code class=property>transparent</code>’ value on ‘<a
|
|
href="#background-color"><code
|
|
class=property>background-color</code></a>’.
|
|
|
|
<h3 id=layering><span class=secno>3.1. </span>Layering multiple background
|
|
images</h3>
|
|
|
|
<p>The background of a box can have multiple <span class=index
|
|
id=layers>layers</span> in CSS3. The number of layers is determined by the
|
|
number of comma-separated values in the ‘<a
|
|
href="#background-image"><code
|
|
class=property>background-image</code></a>’ property. Note that a
|
|
value of ‘<code class=property>none</code>’ still creates a
|
|
layer.
|
|
|
|
<p>Each of the images is sized, positioned, and tiled according to the
|
|
corresponding value in the other background properties. The lists are
|
|
matched up from the first value: excess values at the end are not used. If
|
|
a property doesn't have enough comma-separated values to match the number
|
|
of layers, the <a href="#ua">UA</a> must calculate its used value by
|
|
repeating the list of values until there are enough.
|
|
|
|
<div class=example>
|
|
<p>For example, this set of declarations:
|
|
|
|
<pre>
|
|
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;
|
|
</pre>
|
|
|
|
<p>has exactly the same effect as this set with the extra position dropped
|
|
and the missing values for ‘<a href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ and ‘<a
|
|
href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ filled in (emphasized
|
|
for clarity):
|
|
|
|
<pre>
|
|
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<strong>, border-box</strong>;
|
|
background-repeat: no-repeat<strong>, no-repeat, no-repeat</strong>;
|
|
</pre>
|
|
</div>
|
|
|
|
<p>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.
|
|
|
|
<p class=note>Note that the <a href="#border-images">border-image
|
|
properties</a> can also define a background image, which, if present, is
|
|
painted on top of the background created by the background properties.
|
|
|
|
<h3 id=the-background-color><span class=secno>3.2. </span>The ‘<a
|
|
href="#background-color"><code
|
|
class=property>background-color</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-color>background-color</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltcolorgt"><var><color></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>transparent
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the computed color(s)
|
|
</table>
|
|
|
|
<p>This property sets the <span class=index id=background-color0
|
|
title="color!!background">background color</span> of an element. The color
|
|
is drawn behind any background images.
|
|
|
|
<div class=example>
|
|
<p>Example:
|
|
|
|
<pre>h1 { background-color: #F00 } /* Sets background to red. */</pre>
|
|
</div>
|
|
|
|
<p>The background color is clipped according to the ‘<a
|
|
href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ value associated with the
|
|
bottom-most background image.
|
|
|
|
<h3 id=the-background-image><span class=secno>3.3. </span>The ‘<a
|
|
href="#background-image"><code
|
|
class=property>background-image</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-image>background-image</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltbg-imagegt"><var><bg-image></var></a> [ , <a
|
|
href="#ltbg-imagegt"><var><bg-image></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified, but with URIs made absolute
|
|
</table>
|
|
|
|
<p>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
|
|
|
|
<pre
|
|
class=prod><dfn id=ltbg-imagegt><var><bg-image></var></dfn> = <a href="#ltimagegt"><var><image></var></a> | none</pre>
|
|
|
|
<p>A value of <dfn id=none title="''none''!!'background-image'
|
|
value">‘<code class=css>none</code>’</dfn> 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.
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-image"><code
|
|
class=property>background-image</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<p>When setting a background image, authors should also specify a ‘<a
|
|
href="#background-color"><code
|
|
class=css>background-color</code></a>’ that will preserve contrast
|
|
with the text for when the image is unavailable.
|
|
|
|
<p>For accessibility reasons, authors should not use background images as
|
|
the sole method of conveying important information. See <a
|
|
href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3">Web Content
|
|
Accessibility Guideline F3</a> <a href="#WCAG20"
|
|
rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a>. Images are not accessible
|
|
in non-graphical presentations, and background images specifically might
|
|
be turned off in high-contrast display modes.
|
|
|
|
<p class=note>Note that stylistic foreground images can be provided in CSS
|
|
with the <a
|
|
href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
|
|
property. (Semantically-important foreground images should be provided in
|
|
the document markup, e.g. with the <img> tag in HTML.)
|
|
|
|
<p class=note><a
|
|
href="http://www.w3.org/TR/media-frags/#naming-space">Media fragments</a>
|
|
can be used to display a portion of an image. The <a
|
|
href="http://www.w3.org/TR/css3-images/">CSS Images</a> module will
|
|
provide fallback syntax for image formats and include additional controls
|
|
for image display.
|
|
|
|
<div class=example>
|
|
<p>Some examples specifying background images:</p>
|
|
|
|
<pre>
|
|
body { background-image: url("marble.svg") }
|
|
p { background-image: none }
|
|
div { background-image: url(tl.png), url(tr.png) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=note>Implementations may optimize by not downloading and drawing
|
|
images that are not visible (e.g., because they are behind other, fully
|
|
opaque images).
|
|
|
|
<h3 id=the-background-repeat><span class=secno>3.4. </span>The ‘<a
|
|
href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-repeat>background-repeat</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltrepeat-stylegt"><var><repeat-style></var></a> [ ,
|
|
<a href="#ltrepeat-stylegt"><var><repeat-style></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>repeat
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>Specifies how background images are tiled after they have been <a
|
|
href="#the-background-size">sized</a> and <a
|
|
href="#the-background-position">positioned</a>. Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltrepeat-stylegt><var><repeat-style></var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
|
|
|
|
<p>Single values for <a
|
|
href="#ltrepeat-stylegt"><var><repeat-style></var></a> have the
|
|
following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=repeat-x>‘<code class=css>repeat-x</code>’</dfn>
|
|
|
|
<dd> Equivalent to ‘<code class=css>repeat no-repeat</code>’.
|
|
|
|
<dt><dfn id=repeat-y>‘<code class=css>repeat-y</code>’</dfn>
|
|
|
|
<dd> Equivalent to ‘<code class=css>no-repeat repeat</code>’.
|
|
|
|
<dt>‘<code class=css>repeat</code>’
|
|
|
|
<dd> Equivalent to ‘<code class=css>repeat repeat</code>’.
|
|
|
|
<dt>‘<code class=css>space</code>’
|
|
|
|
<dd> Equivalent to ‘<code class=css>space space</code>’
|
|
|
|
<dt>‘<code class=css>round</code>’
|
|
|
|
<dd> Equivalent to ‘<code class=css>round round</code>’
|
|
|
|
<dt>‘<code class=css>no-repeat</code>’
|
|
|
|
<dd> Equivalent to ‘<code class=css>no-repeat
|
|
no-repeat</code>’
|
|
</dl>
|
|
|
|
<p>If a <a href="#ltrepeat-stylegt"><var><repeat-style></var></a>
|
|
value has two keywords, the first one is for the horizontal direction, the
|
|
second for the vertical one, as follows:
|
|
|
|
<dl>
|
|
<dt><dfn id=repeat title="''repeat''!!'background-repeat'
|
|
value">‘<code class=css>repeat</code>’</dfn>
|
|
|
|
<dd> The image is repeated in this direction as often as needed to cover
|
|
the <a class=index href="#background-painting-area"
|
|
id=background-painting-area0>background painting area</a>.
|
|
|
|
<dt><dfn id=space title="''space''!!'background-repeat'
|
|
value">‘<code class=css>space</code>’</dfn>
|
|
|
|
<dd> The image is repeated as often as will fit within the <a class=index
|
|
href="#background-positioning-area"
|
|
id=background-positioning-area0>background positioning area</a> 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 <a class=index
|
|
href="#background-painting-area" id=background-painting-area1>background
|
|
painting area</a> is larger than the background positioning area, then
|
|
the pattern repeats to fill the background painting area. The value of
|
|
‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ 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 ‘<a
|
|
href="#background-position"><code
|
|
class=property>background-position</code></a>’ determines its
|
|
position in this direction.
|
|
|
|
<dt><dfn id=round title="''round''!!'background-repeat'
|
|
value">‘<code class=css>round</code>’</dfn>
|
|
|
|
<dd> The image is repeated as often as will fit within the <a class=index
|
|
href="#background-positioning-area"
|
|
id=background-positioning-area.>background positioning area.</a> If it
|
|
doesn't fit a whole number of times, it is rescaled so that it does. See
|
|
the formula under ‘<a href="#background-size"><code
|
|
class=property>background-size</code></a>’. If the <a class=index
|
|
href="#background-painting-area" id=background-painting-area2>background
|
|
painting area</a> is larger than the background positioning area, then
|
|
the pattern repeats to fill the background painting area.
|
|
|
|
<dt><dfn id=no-repeat title="''no-repeat''!!'background-repeat'
|
|
value">‘<code class=css>no-repeat</code>’</dfn>
|
|
|
|
<dd> The image is placed once and not repeated in this direction.
|
|
</dl>
|
|
|
|
<p>Unless one of the two keywords is ‘<code
|
|
class=css>no-repeat</code>’, the whole background painting area will
|
|
be tiled, i.e., not just one vertical strip and one horizontal strip.
|
|
|
|
<div class=example>
|
|
<p style="display:none">Example(s):
|
|
|
|
<pre>
|
|
body {
|
|
background: white url("pendant.png");
|
|
background-repeat: repeat-y;
|
|
background-position: center;
|
|
}
|
|
</pre>
|
|
|
|
<div class=figure>
|
|
<p><img alt="A centered background image, with copies repeated up and
|
|
down the border, padding and content areas."
|
|
src=bg-repeat><!--<SPAN class="dlink"> <A
|
|
name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html"
|
|
title="Long description for background pattern">[D]</A></SPAN>-->
|
|
|
|
|
|
<p class=caption>The effect of ‘<code
|
|
class=css>repeat-y</code>’: One copy of the background image is
|
|
centered, and other copies are put above and below it to make a vertical
|
|
band behind the element.
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p style="display:none">Example(s):
|
|
|
|
<pre>
|
|
body {
|
|
background-image: url(dot.png) white;
|
|
background-repeat: space
|
|
}
|
|
</pre>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Image of an element with a dotted background" src=bg-space>
|
|
|
|
<p class=caption>The effect of ‘<code
|
|
class=property>space</code>’: the image of a dot is tiled to cover
|
|
the whole background and the images are equally spaced.
|
|
</div>
|
|
</div>
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<h3 id=the-background-attachment><span class=secno>3.5. </span>The
|
|
‘<a href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-attachment>background-attachment</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltattachmentgt"><var><attachment></var></a> [ , <a
|
|
href="#ltattachmentgt"><var><attachment></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>scroll
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>If background images are specified, this property specifies whether they
|
|
are fixed with regard to the <em class=index id=viewport>viewport</em>
|
|
(<dfn id=fixed>‘<code class=css>fixed</code>’</dfn>) or scroll
|
|
along with the element (<dfn id=scroll>‘<code
|
|
class=css>scroll</code>’</dfn>) or its contents (<dfn
|
|
id=local>‘<code class=css>local</code>’</dfn>). The property's
|
|
value is given as a comma-separated list of <attachment> keywords
|
|
where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltattachmentgt><var><attachment></var></dfn> = scroll | fixed | local</pre>
|
|
|
|
<dl>
|
|
<dt><dfn id=fixed0>fixed</dfn>
|
|
|
|
<dd>The background is fixed with regard to the viewport. In paged media
|
|
where there is no viewport, a ‘<a href="#fixed0"><code
|
|
class=css>fixed</code></a>’ background is fixed with respect to the
|
|
<a href="http://www.w3.org/TR/CSS21/page.html#page-box">page box</a> and
|
|
therefore replicated on every page. <span class=note>Note that there is
|
|
only one viewport per view. Even if an element has a scrolling mechanism
|
|
(see the ‘<code class=property>overflow</code>’ property <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a ‘<a
|
|
href="#fixed0"><code class=css>fixed</code></a>’ background doesn't
|
|
move with the element.</span>
|
|
|
|
<dt><dfn id=local0>local</dfn>
|
|
|
|
<dd>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. In this case, the background behind the element's
|
|
border (if any) scrolls as well, even though the border itself does not
|
|
scroll with the contents. The UA may, however, treat the ‘<code
|
|
class=css>border-box</code>’ value of ‘<a
|
|
href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ as ‘<code
|
|
class=css>padding-box</code>’ in cases where ‘<a
|
|
href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’ is ‘<a
|
|
href="#local0"><code class=css>local</code></a>’ and the contents
|
|
of the element scroll.
|
|
|
|
<dt><dfn id=scroll0>scroll</dfn>
|
|
|
|
<dd>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.)
|
|
</dl>
|
|
|
|
<p>Even if the image is fixed, it is still only visible when it is in the
|
|
<a href="#background-painting-area"><em class=index
|
|
id=background-painting-area3>background painting area</em></a> of the
|
|
element or otherwise unclipped. (See <a href="#special-backgrounds">
|
|
“The backgrounds of special elements”</a> for the cases when
|
|
background images are not clipped.) Thus, unless the image is tiled, it
|
|
may be invisible.
|
|
|
|
<div class=example>
|
|
<p>This example creates an infinite vertical band that remains “glued”
|
|
to the viewport when the element is scrolled.
|
|
|
|
<pre>
|
|
body {
|
|
background: red url("pendant.gif");
|
|
background-repeat: repeat-y;
|
|
background-attachment: fixed;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>User agents that do not support ‘<a href="#fixed0"><code
|
|
class=css>fixed</code></a>’ backgrounds (for example due to
|
|
limitations of the hardware platform) should ignore declarations with the
|
|
keyword ‘<a href="#fixed0"><code class=css>fixed</code></a>’.
|
|
For example:
|
|
|
|
<pre class=example>
|
|
body {
|
|
/* For all UAs: */
|
|
background: white url(paper.png) scroll;
|
|
/* For UAs that do fixed backgrounds: */
|
|
background: white url(ledger.png) fixed;
|
|
}
|
|
h1 {
|
|
/* For all UAs: */
|
|
background: silver;
|
|
/* For UAs that do fixed backgrounds: */
|
|
background: url(stripe.png) fixed, white url(ledger.png) fixed;
|
|
}
|
|
</pre>
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’ interacts with
|
|
other comma-separated background properties to form each background image
|
|
layer.
|
|
|
|
<h3 id=the-background-position><span class=secno>3.6. </span>The ‘<a
|
|
href="#background-position"><code
|
|
class=property>background-position</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-position>background-position</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltbg-positiongt"><var><bg-position></var></a> [ , <a
|
|
href="#ltbg-positiongt"><var><bg-position></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0% 0%
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refer to size of <a class=index href="#background-positioning-area"
|
|
id=background-positioning-area1>background positioning area</a>
|
|
<em>minus</em> size of background image; see text
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>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.
|
|
</table>
|
|
|
|
<p>If background images have been specified, this property specifies their
|
|
initial position (after any <a href="#the-background-size">resizing</a>)
|
|
within their corresponding <a
|
|
href="#background-positioning-area">background positioning area.</a>
|
|
|
|
<p>Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltbg-positiongt><var><bg-position></var></dfn> = [
|
|
[ top | bottom ]
|
|
|
|
|
[ <var><percentage></var> | <var><length></var> | left | center | right ]
|
|
[ <var><percentage></var> | <var><length></var> | top | center | bottom ]?
|
|
|
|
|
[ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
|
|
[ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]
|
|
]</pre>
|
|
|
|
<p>If only one value is specified, the second value is assumed to be
|
|
‘<code class=property>center</code>’. If two values are given
|
|
and at least one value is not a keyword, then the first value represents
|
|
the horizontal position (or offset) and the second represents the vertical
|
|
position (or offset). <var><percentage></var> and
|
|
<var><length></var> values here represent an offset of the top left
|
|
corner of the background image from the top left corner of the background
|
|
positioning area.
|
|
|
|
<p>If three or four values are given, then each
|
|
<var><percentage></var> or<var><length></var> represents an
|
|
offset and must be preceded by a keyword, which specifies from which edge
|
|
the offset is given. For example, ‘<code
|
|
class=css>background-position: bottom 10px right 20px</code>’
|
|
represents a ‘<code class=css>10px</code>’ vertical offset up
|
|
from the bottom edge and a ‘<code class=css>20px</code>’
|
|
horizontal offset leftward from the right edge. If three values are given,
|
|
the missing offset is assumed to be zero.
|
|
|
|
<p>Positive values represent an offset <em>inward</em> from the edge of the
|
|
background positioning area. Negative values represent an offset
|
|
<em>outward</em> from the edge of the background positioning area.
|
|
|
|
<div class=example>
|
|
<p>The following declarations give the stated (horizontal, vertical)
|
|
offsets from the top left corner:</p>
|
|
|
|
<pre>
|
|
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 */</pre>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>
|
|
<p>A percentage for the horizontal offset is relative to (<var>width of
|
|
background positioning area</var> - <var>width of background
|
|
image</var>). A percentage for the vertical offset is relative to
|
|
(<var>height of background positioning area</var> - <var>height of
|
|
background image</var>), where the size of the image is the size given
|
|
by ‘<a href="#background-size"><code
|
|
class=property>background-size</code></a>’.
|
|
|
|
<div class=example>
|
|
<p>For example, with a value pair of ‘<code class=css>0%
|
|
0%</code>’, 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 ‘<code class=css>100% 100%</code>’ places the lower
|
|
right corner of the image in the lower right corner of the area. With a
|
|
value pair of ‘<code class=css>75% 50%</code>’, the point
|
|
75% across and 50% down the image is to be placed at the point 75%
|
|
across and 50% down the area.
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram of image position within element" src=bg-pos.png>
|
|
|
|
<p class=caption>Diagram of the meaning of ‘<code
|
|
class=css>background-position: 75% 50%</code>’.
|
|
</div>
|
|
</div>
|
|
|
|
<dt><var><length></var>
|
|
|
|
<dd>A length value gives a fixed length as the offset. For example, with a
|
|
value pair of ‘<code class=css>2cm 1cm</code>’, 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.
|
|
|
|
<dt><dfn id=top title="''top''!!'background-position' value">‘<code
|
|
class=css>top</code>’</dfn>
|
|
|
|
<dd>Equivalent to ‘<code class=css>0%</code>’ for the vertical
|
|
position if one or two values are given, otherwise specifies the top edge
|
|
as the origin for the next offset.
|
|
|
|
<dt><dfn id=right title="''right''!!'background-position'
|
|
value">‘<code class=css>right</code>’</dfn>
|
|
|
|
<dd>Equivalent to ‘<code class=css>100%</code>’ for the
|
|
horizontal position if one or two values are given, otherwise specifies
|
|
the right edge as the origin for the next offset.
|
|
|
|
<dt><dfn id=bottom title="''bottom''!!'background-position'
|
|
value">‘<code class=css>bottom</code>’</dfn>
|
|
|
|
<dd>Equivalent to ‘<code class=css>100%</code>’ for the
|
|
vertical position if one or two values are given, otherwise specifies the
|
|
bottom edge as the origin for the next offset.
|
|
|
|
<dt><dfn id=left title="''left''!!'background-position'
|
|
value">‘<code class=css>left</code>’</dfn>
|
|
|
|
<dd>Equivalent to ‘<code class=css>0%</code>’ for the
|
|
horizontal position if one or two values are given, otherwise specifies
|
|
the left edge as the origin for the next offset.
|
|
|
|
<dt><dfn id=center title="''center''!!'background-position'
|
|
value">‘<code class=css>center</code>’</dfn>
|
|
|
|
<dd>Equivalent to ‘<code class=css>50%</code>’ (‘<code
|
|
class=css>left 50%</code>’) for the horizontal position if the
|
|
horizontal position is not otherwise specified, or ‘<code
|
|
class=css>50%</code>’ (‘<code class=css>top
|
|
50%</code>’) for the vertical position if it is.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>The following ‘<a href="#background"><code
|
|
class=property>background</code></a>’ shorthand declarations use
|
|
keywords to set ‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ to the stated
|
|
percentage values.</p>
|
|
|
|
<pre>
|
|
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% */
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In the example below, the (single) image is placed in the lower-right
|
|
corner of the viewport.
|
|
|
|
<pre>
|
|
body {
|
|
background-image: url("logo.png");
|
|
background-attachment: fixed;
|
|
background-position: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Background positions can also be relative to other corners than the top
|
|
left. E.g., the following puts the background image 10px from the bottom
|
|
and 3em from the right:
|
|
|
|
<pre>background-position: right 3em bottom 10px</pre>
|
|
</div>
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<h3 id=the-background-clip><span class=secno>3.7. </span>The ‘<a
|
|
href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-clip>background-clip</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltboxgt"><var><box></var></a> [ , <a
|
|
href="#ltboxgt"><var><box></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>border-box
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>same as specified value
|
|
</table>
|
|
|
|
<p>Determines the <dfn id=background-painting-area>background painting
|
|
area</dfn>. The syntax of the property is given with
|
|
|
|
<pre
|
|
class=prod><dfn id=ltboxgt><var><box></var></dfn> = border-box | padding-box | content-box</pre>
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=border-box title="''border-box''!!'background-clip' value">
|
|
‘<code class=css>border-box</code>’</dfn>
|
|
|
|
<dd>The background is painted within (clipped to) the <span>border
|
|
box.</span>
|
|
|
|
<dt><dfn id=padding-box title="''padding-box''!!'background-clip' value">
|
|
‘<code class=css>padding-box</code>’</dfn>
|
|
|
|
<dd>The background is painted within (clipped to) the <span>padding
|
|
box.</span>
|
|
|
|
<dt><dfn id=content-box title="''content-box''!!'background-clip' value">
|
|
‘<code class=css>content-box</code>’</dfn>
|
|
|
|
<dd>The background is painted within (clipped to) the <span>content
|
|
box.</span>
|
|
</dl>
|
|
|
|
<p class=note>Note that the root element has a different <a
|
|
href="#background-painting-area">background painting area,</a> and thus
|
|
the ‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ property has no effect
|
|
when specified on it. See <a href="#special-backgrounds"> “The
|
|
backgrounds of special elements.”</a>
|
|
|
|
<p class=note>Note that the background is always drawn <em>behind</em> the
|
|
border, if any. See “Elaborate description of Stacking Contexts” in <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-clip"><code
|
|
class=css>background-clip</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<h3 id=the-background-origin><span class=secno>3.8. </span>The ‘<a
|
|
href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-origin>background-origin</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltboxgt"><var><box></var></a> [ , <a
|
|
href="#ltboxgt"><var><box></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>padding-box
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>same as specified value
|
|
</table>
|
|
|
|
<p>For elements rendered as a single box, specifies the <dfn
|
|
id=background-positioning-area>background positioning area</dfn>. For
|
|
elements rendered as multiple boxes (e.g., inline boxes on several lines,
|
|
boxes on several pages) specifies which boxes ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’ operates on to
|
|
determine the background positioning area(s).
|
|
|
|
<dl>
|
|
<dt><dfn id=padding-box0 title="''padding-box''!!'background-origin'
|
|
value"> ‘<code class=css>padding-box</code>’</dfn>
|
|
|
|
<dd>The position is relative to the padding box. (For single boxes
|
|
‘<code class=css>0 0</code>’ is the upper left corner of the
|
|
padding edge, ‘<code class=css>100% 100%</code>’ is the lower
|
|
right corner.)
|
|
|
|
<dt><dfn id=border-box0 title="''border-box''!!'background-origin' value">
|
|
‘<code class=css>border-box</code>’</dfn>
|
|
|
|
<dd>The position is relative to the border box.
|
|
|
|
<dt><dfn id=content-box0>‘<code
|
|
class=css>content-box</code>’</dfn>
|
|
|
|
<dd>The position is relative to the content box.
|
|
</dl>
|
|
|
|
<p>If the ‘<a href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’ value for this
|
|
image is ‘<a href="#fixed0"><code class=css>fixed</code></a>’,
|
|
then this property has no effect: in this case the background positioning
|
|
area is the <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial
|
|
containing block</a> <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<p class=note>Note that if ‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ is ‘<code
|
|
class=css>padding-box</code>’, ‘<a
|
|
href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ is ‘<code
|
|
class=css>border-box</code>’, ‘<a
|
|
href="#background-position"><code
|
|
class=property>background-position</code></a>’ is ‘<code
|
|
class=css>top left</code>’ (the initial value), and the element has
|
|
a non-zero border, then the top and left of the background image will be
|
|
clipped.
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-origin"><code
|
|
class=css>background-origin</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<h3 id=the-background-size><span class=secno>3.9. </span>The ‘<a
|
|
href="#background-size"><code
|
|
class=property>background-size</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background-size>background-size</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltbg-sizegt"><var><bg-size></var></a> [ , <a
|
|
href="#ltbg-sizegt"><var><bg-size></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>see text
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>for <length> the absolute value, otherwise as specified
|
|
</table>
|
|
|
|
<p>Specifies the size of the background images. Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltbg-sizegt><var><bg-size></var></dfn> = [ <var><length></var> | <var><percentage></var> | auto ]{1,2} | cover | contain</pre>
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=contain>‘<code class=css>contain</code>’</dfn>
|
|
|
|
<dd>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 <a class=index href="#background-positioning-area"
|
|
id=background-positioning-area.0>background positioning area.</a>
|
|
|
|
<dt><dfn id=cover>‘<code class=css>cover</code>’</dfn>
|
|
|
|
<dd>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.
|
|
|
|
<dt>[ <var><length></var> | <var><percentage></var> | <dfn
|
|
id=auto title="''auto''!!'background-size' value">auto</dfn> ]{1,2}
|
|
|
|
<dd>
|
|
<p>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
|
|
‘<code class=css>auto</code>’.
|
|
|
|
<p>A percentage is relative to the background positioning area.
|
|
|
|
<p>An ‘<code class=css>auto</code>’ 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%.
|
|
|
|
<p>If both values are ‘<code class=css>auto</code>’ 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 ‘<code class=css>contain</code>’.
|
|
|
|
<p>Negative values are not allowed.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>Here are some examples. The first example stretches the background
|
|
image independently in both dimensions to completely cover the content
|
|
area:
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(plasma.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-origin: content-box }
|
|
</pre>
|
|
|
|
<p>The second example stretches the image so that exactly two copies fit
|
|
horizontally. The aspect ratio is preserved:
|
|
|
|
<pre>
|
|
p {
|
|
background-image: url(tubes.png);
|
|
background-size: 50% auto;
|
|
background-origin: border-box }
|
|
</pre>
|
|
|
|
<p>This example forces the background image to be 15 by 15 pixels:
|
|
|
|
<pre>
|
|
para {
|
|
background-size: 15px 15px;
|
|
background-image: url(tile.png)}
|
|
</pre>
|
|
|
|
<p>This example uses the image's intrinsic size. Note that this is the
|
|
only possible behavior in CSS level 1 and 2.
|
|
|
|
<pre>
|
|
body {
|
|
background-size: auto; /* default */
|
|
background-image: url(flower.png) }
|
|
</pre>
|
|
|
|
<p>The following example rounds the height of the image to 33.3%, up from
|
|
the specified value of 30%. At 30%, three images would fit entirely and a
|
|
fourth only partially. After rounding, three images fit. The width of the
|
|
image is 20% of the background area width and is not rounded.
|
|
|
|
<pre>
|
|
p {
|
|
background-image: url(chain.png);
|
|
background-repeat: no-repeat round;
|
|
background-size: 20% 30% }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If ‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ is ‘<code
|
|
class=css>round</code>’ for one (or both) dimensions, there is a
|
|
second step. The UA must scale the image in that dimension (or both
|
|
dimensions) so that it fits a whole number of times in the background
|
|
positioning area. In the case of the width (height is analogous):
|
|
|
|
<blockquote>
|
|
<p>If <var>X</var> ≠ 0 is the width of the image after step one and
|
|
<var>W</var> is the width of the background positioning area, then the
|
|
rounded width <var>X'</var> = <var>W</var> / round(<var>W</var> /
|
|
<var>X</var>) where round() is a function that returns the nearest
|
|
natural number (integer greater than zero).
|
|
</blockquote>
|
|
|
|
<p>If ‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ is ‘<code
|
|
class=css>round</code>’ for one dimension only and if ‘<a
|
|
href="#background-size"><code
|
|
class=property>background-size</code></a>’ is ‘<code
|
|
class=css>auto</code>’ for the other dimension, then there is a
|
|
third step: that other dimension is scaled so that the original aspect
|
|
ratio is restored.
|
|
|
|
<div class=example>
|
|
<p>In this example the background image is shown at its intrinsic size:
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(image1.png);
|
|
background-repeat: repeat; /* default */
|
|
background-size: auto } /* default */
|
|
</pre>
|
|
|
|
<p>In the following example, the background is shown with a width of 3em
|
|
and its height is scaled proportionally to keep the original aspect
|
|
ratio:
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(image2.png);
|
|
background-repeat: repeat; /* default */
|
|
background-size: 3em } /* = '3em auto' */
|
|
</pre>
|
|
|
|
<p>In the following example, the background is shown with a width of
|
|
approximately 3em: scaled so that it fits a whole number of times in the
|
|
width of the background. The height is scaled proportionally to keep the
|
|
original aspect ratio:
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(image3.png);
|
|
background-repeat: round repeat;
|
|
background-size: 3em auto }
|
|
</pre>
|
|
|
|
<p>In the following example, the background image is shown with a width of
|
|
3em and a height that is either the height corresponding to that width at
|
|
the original aspect ratio or slightly less:
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(image4.png);
|
|
background-repeat: repeat round;
|
|
background-size: 3em auto }
|
|
</pre>
|
|
|
|
<p>In the following example, the background image is shown with a height
|
|
of approximately 4em: scaled slightly so that it fits a whole number of
|
|
times in the background height. The width is the approximately the width
|
|
that correspond to a 4em height at the original aspect ratio: scaled
|
|
slightly so that it fits a whole number of times in the background width.
|
|
|
|
|
|
<pre>
|
|
div {
|
|
background-image: url(image5.png);
|
|
background-repeat: round;
|
|
background-size: auto 4em }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>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.)
|
|
|
|
<p>See the section <a href="#layering">“Layering multiple background
|
|
images”</a> for how ‘<a href="#background-size"><code
|
|
class=property>background-size</code></a>’ interacts with other
|
|
comma-separated background properties to form each background image layer.
|
|
|
|
|
|
<h3 id=the-background><span class=secno>3.10. </span>The ‘<a
|
|
href="#background"><code class=property>background</code></a>’
|
|
shorthand property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=background>background</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <a href="#ltbg-layergt"><var><bg-layer></var></a> , ]* <a
|
|
href="#ltfinal-bg-layergt"><var><final-bg-layer></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltbg-layergt><var><bg-layer></var></dfn> = <a href="#ltbg-imagegt"><var><bg-image></var></a> || <a href="#ltbg-positiongt"><var><bg-position></var></a> [ / <a href="#ltbg-sizegt"><var><bg-size></var></a> ]? || <a href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a href="#ltattachmentgt"><var><attachment></var></a> || <a href="#ltboxgt"><var><box></var></a>{1,2} </pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfinal-bg-layergt><var><final-bg-layer></var></dfn> = <a href="#ltbg-imagegt"><var><bg-image></var></a> || <a href="#ltbg-positiongt"><var><bg-position></var></a> [ / <a href="#ltbg-sizegt"><var><bg-size></var></a> ]? || <a href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a href="#ltattachmentgt"><var><attachment></var></a> || <a href="#ltboxgt"><var><box></var></a>{1,2} || <var><'background-color'></var></pre>
|
|
|
|
<p class=note>Note that a color is permitted in <a
|
|
href="#ltfinal-bg-layergt"><var><final-bg-layer></var></a>, but not
|
|
in <a href="#ltbg-layergt"><var><bg-layer></var></a>.
|
|
|
|
<p>The ‘<a href="#background"><code
|
|
class=property>background</code></a>’ 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, for each layer the shorthand
|
|
first sets the corresponding layer of each of ‘<a
|
|
href="#background-position"><code
|
|
class=property>background-position</code></a>’, ‘<a
|
|
href="#background-size"><code
|
|
class=property>background-size</code></a>’, ‘<a
|
|
href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’, ‘<a
|
|
href="#background-origin"><code
|
|
class=property>background-origin</code></a>’, ‘<a
|
|
href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ and ‘<a
|
|
href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’ to that property's
|
|
initial value, then assigns any explicit values specified for this layer
|
|
in the declaration. Finally ‘<a href="#background-color"><code
|
|
class=property>background-color</code></a>’ is set to the specified
|
|
color, if any, else set to its initial value.
|
|
|
|
<p>If one <a href="#ltboxgt"><var><box></var></a> value is present
|
|
then it sets both ‘<a href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ and ‘<a
|
|
href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ to that value. If two
|
|
values are present, then the first sets ‘<a
|
|
href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ and the second
|
|
‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’.
|
|
|
|
<div class=example>
|
|
<p style="display:none">Examples:
|
|
|
|
<p>In the first rule of the following example, only a value for ‘<a
|
|
href="#background-color"><code
|
|
class=property>background-color</code></a>’ has been given and the
|
|
other individual properties are set to their initial values. In the
|
|
second rule, many individual properties have been specified.
|
|
|
|
<pre>
|
|
body { background: red }
|
|
p { background: url("chess.png") 40% / 10em gray
|
|
round fixed border-box; }
|
|
</pre>
|
|
|
|
<p>The first rule is equivalent to:
|
|
|
|
<pre>
|
|
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 }
|
|
</pre>
|
|
|
|
<p>The second is equivalent to:
|
|
|
|
<pre>
|
|
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) }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following example shows how a both a background color (<span
|
|
class=css>#CCC</span>) and a background image (<span
|
|
class=css>url(metal.jpg)</span>) are set. The image is rescaled to the
|
|
full width of the element:
|
|
|
|
<pre>
|
|
E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Another example shows equivalence:
|
|
|
|
<pre>
|
|
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 }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following declaration with multiple, comma-separated values
|
|
|
|
<pre>
|
|
background: url(a.png) top left no-repeat,
|
|
url(b.png) center / 100% 100% no-repeat,
|
|
url(c.png) white;
|
|
</pre>
|
|
|
|
<p>is equivalent to
|
|
|
|
<pre>
|
|
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;
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=special-backgrounds><span class=secno>3.11. </span>The backgrounds
|
|
of special elements</h3>
|
|
|
|
<p>The background of the root element becomes the background of the <a
|
|
href="http://www.w3.org/TR/CSS21/intro.html#the-canvas">canvas</a> and its
|
|
<a class=index href="#background-painting-area"
|
|
id=background-painting-area4>background painting area</a> extends to cover
|
|
the entire canvas, although any images are sized and positioned relative
|
|
to the root element as if they were painted for that element alone. (In
|
|
other words, the <a href="#background-positioning-area">background
|
|
<em>positioning</em> area</a> is determined as for the root element.) If
|
|
the root's ‘<a href="#background-color"><code
|
|
class=property>background-color</code></a>’ value is ‘<code
|
|
class=css>transparent</code>’, the canvas's background color is UA
|
|
dependent. The root element does not paint this background again, i.e.,
|
|
the used value of its background is transparent.
|
|
|
|
<p>For documents whose root element is an HTML <code class=html>HTML</code>
|
|
element <a href="#HTML401"
|
|
rel=biblioentry>[HTML401]<!--{{!HTML401}}--></a> or an XHTML <code
|
|
class=html>html</code> element <a href="#XHTML11"
|
|
rel=biblioentry>[XHTML11]<!--{{!XHTML11}}--></a>: if the computed value of
|
|
‘<a href="#background-image"><code
|
|
class=property>background-image</code></a>’ on the root element is
|
|
‘<code class=css>none</code>’ and its ‘<a
|
|
href="#background-color"><code
|
|
class=property>background-color</code></a>’ is ‘<code
|
|
class=css>transparent</code>’, user agents must instead propagate
|
|
the computed values of the background properties from that element's first
|
|
HTML <code class=html>BODY</code> or XHTML <code class=html>body</code>
|
|
child element. The used values of that <code class=html>BODY</code>
|
|
element's background properties are their initial values, and the
|
|
propagated values are treated as if they were specified on the root
|
|
element. It is recommended that authors of HTML documents specify the
|
|
canvas background for the <code class=html>BODY</code> element rather than
|
|
the <code class=html>HTML</code> element.
|
|
|
|
<div class=example>
|
|
<p>According to these rules, the canvas underlying the following HTML
|
|
document will have a “marble” background:
|
|
|
|
<pre>
|
|
<!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>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The ‘<code class=css>::first-line</code>’ pseudo-element is
|
|
like an inline-level element for the purposes of the background (see
|
|
section 5.12.1 of <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). That means, e.g., that in a
|
|
left-justified first line, the background does not necessarily extend all
|
|
the way to the right margin.
|
|
|
|
<h2 id=borders><span class=secno>4. </span>Border properties</h2>
|
|
|
|
<p>The border can either be a predefined style (solid line, double line,
|
|
dotted line, pseudo-3D border, etc.) or it can be an image. In the former
|
|
case, various properties define the style (‘<a
|
|
href="#border-style"><code class=property>border-style</code></a>’),
|
|
color (‘<a href="#border-color"><code
|
|
class=property>border-color</code></a>’), and thickness (‘<a
|
|
href="#border-width"><code class=property>border-width</code></a>’)
|
|
of the border.
|
|
|
|
<h3 id=the-border-color><span class=secno>4.1. </span>The ‘<a
|
|
href="#border-color"><code class=property>border-color</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-top-color>border-top-color</dfn> , <dfn
|
|
id=border-right-color>border-right-color</dfn>, <dfn
|
|
id=border-bottom-color>border-bottom-color</dfn>, <dfn
|
|
id=border-left-color>border-left-color</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltcolorgt"><var><color></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td><a
|
|
href="http://www.w3.org/TR/css3-color/#currentcolor">currentColor</a>
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the computed color
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-color>border-color</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltcolorgt"><var><color></var></a>{1,4}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>(see individual properties)
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>These properties set the foreground color of the border specified by the
|
|
<a class=property href="#border-style">border-style</a> properties.
|
|
|
|
<p>‘<a href="#border-color"><code
|
|
class=property>Border-color</code></a>’ is a shorthand for the four
|
|
‘<code class=css>border-*-color</code>’ 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.
|
|
|
|
<h3 id=the-border-style><span class=secno>4.2. </span>The ‘<a
|
|
href="#border-style"><code class=property>border-style</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-top-style>border-top-style</dfn>, <dfn
|
|
id=border-right-style>border-right-style</dfn>, <dfn
|
|
id=border-bottom-style>border-bottom-style</dfn>, <dfn
|
|
id=border-left-style>border-left-style</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-stylegt"><var><border-style></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-style>border-style</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-stylegt"><var><border-style></var></a>{1,4}
|
|
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>(see individual properties)
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>These properties set the style of the border, unless there is a <a
|
|
href="#border-images">border image</a>
|
|
|
|
<p>‘<a href="#border-style"><code
|
|
class=property>Border-style</code></a>’ 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.
|
|
|
|
<p>Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltborder-stylegt><var><border-style></var></dfn> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none0 title="''none''!!'border-style' value">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd> No border. Color and width are ignored (i.e., the border has width 0,
|
|
unless the border is an image, see ‘<a
|
|
href="#background-image"><code
|
|
class=property>background-image</code></a>’
|
|
|
|
<dt><dfn id=hidden>‘<code class=css>hidden</code>’</dfn>
|
|
|
|
<dd> Same as ‘<code class=property>none</code>’, but has
|
|
different behavior in the border conflict resolution rules for
|
|
border-collapsed tables <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<dt><dfn id=dotted>‘<code class=css>dotted</code>’</dfn>
|
|
|
|
<dd> A series of round dots.
|
|
|
|
<dt><dfn id=dashed>‘<code class=css>dashed</code>’</dfn>
|
|
|
|
<dd> A series of square-ended dashes.
|
|
|
|
<dt><dfn id=solid>‘<code class=css>solid</code>’</dfn>
|
|
|
|
<dd> A single line segment.
|
|
|
|
<dt><dfn id=double>‘<code class=css>double</code>’</dfn>
|
|
|
|
<dd> 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 ‘<a href="#border-width"><code
|
|
class=property>border-width</code></a>’.)
|
|
|
|
<dt><dfn id=groove>‘<code class=css>groove</code>’</dfn>
|
|
|
|
<dd> 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 ‘<a href="#border-color"><code
|
|
class=property>border-color</code></a>’.)
|
|
|
|
<dt><dfn id=ridge>‘<code class=css>ridge</code>’</dfn>
|
|
|
|
<dd> Looks as if it were coming out of the canvas.
|
|
|
|
<dt><dfn id=inset>‘<code class=css>inset</code>’</dfn>
|
|
|
|
<dd> Looks as if the content on the inside of the border is sunken into
|
|
the canvas. Treated as ‘<code class=property>ridge</code>’ in
|
|
border-collapsed tables. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<dt><dfn id=outset>‘<code class=css>outset</code>’</dfn>
|
|
|
|
<dd> Looks as if the content on the inside of the border is coming out of
|
|
the canvas. Treated as ‘<code class=property>groove</code>’
|
|
in border-collapsed tables. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</dl>
|
|
|
|
<p>Borders are drawn in front of the element's background, but behind the
|
|
element's content (in case it overlaps).
|
|
|
|
<div class=figure>
|
|
<p><img alt="Examples of border styles" src=borderstyles.png>
|
|
|
|
<p class=caption>Example renderings of the predefined border styles.
|
|
</div>
|
|
|
|
<p class=note>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.
|
|
|
|
<p class=note>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.
|
|
|
|
<h3 id=the-border-width><span class=secno>4.3. </span>The ‘<a
|
|
href="#border-width"><code class=property>border-width</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-top-width>border-top-width</dfn>, <dfn
|
|
id=border-right-width>border-right-width</dfn>, <dfn
|
|
id=border-bottom-width>border-bottom-width</dfn>, <dfn
|
|
id=border-left-width>border-left-width</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-widthgt"><var><border-width></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>medium
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>width* of containing block
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>absolute length; ‘<code class=css>0</code>’ if the
|
|
border style is ‘<code class=property>none</code>’ or
|
|
‘<code class=property>hidden</code>’
|
|
|
|
<tr>
|
|
<td class=footnote colspan=2>*) if the containing block has a horizontal
|
|
text mode, otherwise the height
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-width>border-width</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-widthgt"><var><border-width></var></a>{1,4}
|
|
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>(see individual properties)
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>These properties set the thickness of the border. Where
|
|
|
|
<pre
|
|
class=prod><dfn id=ltborder-widthgt><var><border-width></var></dfn> = <var><length></var> | thin | medium | thick</pre>
|
|
|
|
<p>The <var><length></var> may not be negative. The lengths
|
|
corresponding to ‘<code class=css>thin</code>’, ‘<code
|
|
class=css>medium</code>’ and ‘<code
|
|
class=css>thick</code>’ are not specified, but the values are
|
|
constant throughout a <a href="#document">document</a> and thin ≤
|
|
medium ≤ thick. A UA could, e.g., make the thickness depend on the
|
|
‘<code class=css>medium</code>’ font size: one choice might be
|
|
1, 3 & 5px when the ‘<code class=property>medium</code>’
|
|
font size is 17px or less.
|
|
|
|
<p>‘<a href="#border-width"><code
|
|
class=property>Border-width</code></a>’ is a shorthand that sets the
|
|
four ‘<code class=css>border-*-width</code>’ 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.
|
|
|
|
<p class=note>Note that the initial width is ‘<code
|
|
class=property>medium</code>’, but the initial style is ‘<code
|
|
class=property>none</code>’ and therefore the used width is 0.
|
|
|
|
<p>When the used width of the border is 0, we say that the border is
|
|
absent.
|
|
|
|
<h3 id=the-border-shorthands><span class=secno>4.4. </span>The border
|
|
shorthand properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-top>border-top</dfn>, <dfn
|
|
id=border-right>border-right</dfn>, <dfn
|
|
id=border-bottom>border-bottom</dfn>, <dfn
|
|
id=border-left>border-left</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-widthgt"><var><border-width></var></a> ||
|
|
<a href="#ltborder-stylegt"><var><border-style></var></a> || <a
|
|
href="#ltcolorgt"><var><color></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>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.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border>border</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#ltborder-widthgt"><var><border-width></var></a> ||
|
|
<a href="#ltborder-stylegt"><var><border-style></var></a> || <a
|
|
href="#ltcolorgt"><var><color></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>The ‘<a href="#border"><code
|
|
class=property>border</code></a>’ property is a shorthand property
|
|
for setting the same width, color, and style for all four borders of a
|
|
box. Unlike the shorthand ‘<code class=property>margin</code>’
|
|
and ‘<code class=property>padding</code>’ properties, the
|
|
‘<a href="#border"><code class=property>border</code></a>’
|
|
property cannot set different values on the four borders. To do so, one or
|
|
more of the other border properties must be used.
|
|
|
|
<p>The ‘<a href="#border"><code
|
|
class=property>border</code></a>’ shorthand also resets ‘<a
|
|
href="#border-image"><code class=property>border-image</code></a>’
|
|
to its initial value. It is therefore recommended that authors use the
|
|
‘<a href="#border"><code class=property>border</code></a>’
|
|
shorthand, rather than other shorthands or the individual properties, to
|
|
override any border settings earlier in the cascade. This will ensure that
|
|
‘<a href="#border-image"><code
|
|
class=property>border-image</code></a>’ has also been reset to allow
|
|
the new styles to take effect.
|
|
|
|
<p class=note>The CSS Working Group intends for the ‘<a
|
|
href="#border"><code class=property>border</code></a>’ shorthand to
|
|
reset all border properties in future levels of CSS as well. For example,
|
|
if a ‘<code class=property>border-characters</code>’ property
|
|
is introduced in the future to allow glyphs as borders, it will also be
|
|
reset by the ‘<a href="#border"><code
|
|
class=property>border</code></a>’ shorthand. By using the ‘<a
|
|
href="#border"><code class=property>border</code></a>’ shorthand to
|
|
reset borders, authors can be guaranteed a “blank canvas” no matter
|
|
what properties are introduced in the future.
|
|
|
|
<div class=example>
|
|
<p>For example, the first rule below is equivalent to the set of four
|
|
rules shown after it:
|
|
|
|
<pre>
|
|
p { border: solid red }
|
|
p {
|
|
border-top: solid red;
|
|
border-right: solid red;
|
|
border-bottom: solid red;
|
|
border-left: solid red;
|
|
border-image: none;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Since, to some extent, the properties have overlapping functionality,
|
|
the order in which the rules are specified is important.
|
|
|
|
<div class=example>
|
|
<p>Consider this example:
|
|
|
|
<pre>
|
|
blockquote {
|
|
border-color: red;
|
|
border-left: double;
|
|
color: black
|
|
}
|
|
</pre>
|
|
|
|
<p>In the above example, the color of the left border is black, while the
|
|
other borders are red. This is due to ‘<a href="#border-left"><code
|
|
class=property>border-left</code></a>’ setting the width, style,
|
|
and color. Since the color value is not given by the ‘<a
|
|
href="#border-left"><code class=property>border-left</code></a>’
|
|
property, it will be taken from the ‘<code
|
|
class=property>color</code>’ property. The fact that the
|
|
‘<code class=property>color</code>’ property is set after the
|
|
‘<a href="#border-left"><code
|
|
class=property>border-left</code></a>’ property is not relevant.
|
|
</div>
|
|
|
|
<h2 id=corners><span class=secno>5. </span>Rounded Corners</h2>
|
|
|
|
<h3 id=the-border-radius><span class=secno>5.1. </span>The ‘<a
|
|
href="#border-radius"><code class=property>border-radius</code></a>’
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-top-right-radius>border-top-right-radius</dfn>, <dfn
|
|
id=border-bottom-right-radius>border-bottom-right-radius</dfn>, <dfn
|
|
id=border-bottom-left-radius>border-bottom-left-radius</dfn>, <dfn
|
|
id=border-top-left-radius>border-top-left-radius</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <var><length></var> | <var><percentage></var> ] [
|
|
<var><length></var> | <var><percentage></var> ]?
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements (but see prose)
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>Refer to corresponding dimension of the <a
|
|
href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">border
|
|
box</a>.
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>two absolute <length> or percentages
|
|
</table>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-radius>border-radius</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <var><length></var> | <var><percentage></var> ]{1,4} [
|
|
/ [ <var><length></var> | <var><percentage></var> ]{1,4} ]?
|
|
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements, except table element when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>Refer to corresponding dimension of the <a
|
|
href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">border
|
|
box</a>.
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>The two length or percentage values of the ‘<code
|
|
class=css>border-*-radius</code>’ 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.
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram of the inscribed ellipse" src=corner.png>
|
|
|
|
<p class=caption>The two values of ‘<code
|
|
class=css>border-top-left-radius: 55pt 25pt</code>’ define the
|
|
curvature of the corner.
|
|
</div>
|
|
|
|
<p>The ‘<a href="#border-radius"><code
|
|
class=property>border-radius</code></a>’ shorthand sets all four
|
|
‘<code class=css>border-*-radius</code>’ 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.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
border-radius: 4em;
|
|
</pre>
|
|
is equivalent to
|
|
<pre>
|
|
border-top-left-radius: 4em;
|
|
border-top-right-radius: 4em;
|
|
border-bottom-right-radius: 4em;
|
|
border-bottom-left-radius: 4em;
|
|
</pre>
|
|
and
|
|
<pre>
|
|
border-radius: 2em 1em 4em / 0.5em 3em;
|
|
</pre>
|
|
is equivalent to
|
|
<pre>
|
|
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;
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=corner-shaping><span class=secno>5.2. </span>Corner Shaping</h3>
|
|
|
|
<p>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.
|
|
|
|
<p class=note>Note that this means that if the outer curve extends past the
|
|
adjacent corner's padding edge, the inner curve may not be a full quarter
|
|
ellipse.
|
|
|
|
<p>All border styles (‘<code class=css>solid</code>’,
|
|
‘<code class=css>dotted</code>’, ‘<code
|
|
class=css>inset</code>’, etc.) follow the curve of the border.
|
|
|
|
<div class=figure>
|
|
<p><img alt="The effect of rounded corners on unequal borders"
|
|
src=smooth-radius.png>
|
|
|
|
<p class=caption>The effect of a rounded corner when the two borders it
|
|
connects are of unequal thickness (left) and the effect of a rounded
|
|
corner on borders that are thicker than the radius of the corner (right).
|
|
|
|
</div>
|
|
|
|
<h3 id=corner-clipping><span class=secno>5.3. </span>Corner Clipping</h3>
|
|
|
|
<p>A box's backgrounds, but not its <a
|
|
href="#the-border-image">border-image</a>, are clipped to the appropriate
|
|
curve (as determined by ‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’). Other effects that clip
|
|
to the border or padding edge (such as ‘<code
|
|
class=property>overflow</code>’ other than ‘<code
|
|
class=css>visible</code>’) also must clip to the curve. The content
|
|
of replaced elements is always trimmed to the content edge curve. Also,
|
|
the area outside the curve of the border edge does not accept mouse events
|
|
on behalf of the element.
|
|
|
|
<div class=example>
|
|
<p>This example adds appropriate padding, so that the contents do not
|
|
overflow the corners. Note that there is no border, but the background
|
|
will still have rounded corners.
|
|
|
|
<pre>
|
|
DIV {
|
|
background: black;
|
|
color: white;
|
|
border-radius: 1em;
|
|
padding: 1em }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=corner-transitions><span class=secno>5.4. </span>Color and Style
|
|
Transitions</h3>
|
|
|
|
<p>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).
|
|
|
|
<p>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.
|
|
|
|
<p>It is not defined what these transitions look like.
|
|
|
|
<div class=figure>
|
|
<p><img alt="Illustration of the transition region on curved corners"
|
|
src=transition-region.png>
|
|
|
|
<p class=caption>Given these corner shapes, color and style transitions
|
|
must be contained within the green region. In case D the rectangle
|
|
defined by the border radii does not include the center of the inner
|
|
curve (which is a sharp corner), so the transition region is expanded to
|
|
include that corner. Transitions may take up the entire transition
|
|
region, but are not required to: For example, a gradient color transition
|
|
between two solid border styles might take up only the region bounded by
|
|
the tips of the outer radii and the tips of the inner radii (represented
|
|
in case D by the dark green region).
|
|
</div>
|
|
|
|
<h3 id=corner-overlap><span class=secno>5.5. </span>Overlapping Curves</h3>
|
|
|
|
<p>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 value of all border radii until none of them overlap. The
|
|
algorithm for reducing radii is as follows:
|
|
|
|
<p>Let <var>f</var> =
|
|
min(<var>L<sub>i</sub></var>/<var>S<sub>i</sub></var>), where <var>i</var>
|
|
∈ {top, right, bottom, left}, <var>S<sub>i</sub></var> is the sum of the
|
|
radii of the corners on side <var>i</var>, and <var>L<sub>top</sub></var>
|
|
= <var>L<sub>bottom</sub></var> = the width of the box, and
|
|
<var>L<sub>left</sub></var> = <var>L<sub>right</sub></var> = the height of
|
|
the box. If <var>f</var> < 1, then all corner radii are reduced by
|
|
multiplying them by <var>f</var>.
|
|
|
|
<p class=note>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.
|
|
|
|
<p>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.
|
|
|
|
<p>The rendering of the box must be exactly the same as if the reduced
|
|
border-radius values were those originally specified.
|
|
|
|
<div class=example>
|
|
<p>For example, the borders A and D of the <a
|
|
href="#reduced-radius">figure below</a> might be the result of
|
|
|
|
<pre>
|
|
box-sizing: border-box;
|
|
width: 6em;
|
|
height: 2.5em;
|
|
border-radius: 0.5em 2em 0.5em 2em
|
|
</pre>
|
|
|
|
<p>The height (2.5em) is enough for the specified radii (0.5em plus
|
|
2.5em). However, if the height is only 2em,
|
|
|
|
<pre>
|
|
box-sizing: border-box;
|
|
width: 6em;
|
|
height: 2em;
|
|
border-radius: 0.5em 2em 0.5em 2em
|
|
</pre>
|
|
|
|
<p>all corners need to be reduced by a factor 0.8 to make them fit. The
|
|
used border radii thus are 0.4em (instead of 0.5em) and 1.6em (instead of
|
|
2em). See borders B and C in the figure.
|
|
|
|
<div class=figure id=reduced-radius>
|
|
<p><img alt="[image: rectangle with two tiny rounded corners and two very
|
|
large ones, on opposite corners]" src=corner-large-mix>
|
|
|
|
<p class=caption>These rounded corner might be the result of ‘<code
|
|
class=css>width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em
|
|
2em</code>’ for A and D; and ditto but with ‘<code
|
|
class=css>height: 2em</code>’ for B and C.
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id=border-radius-tables><span class=secno>5.6. </span>Effect on Tables</h3>
|
|
|
|
<p>The ‘<a href="#border-radius"><code
|
|
class=property>border-radius</code></a>’ properties do apply to
|
|
‘<code class=css>table</code>’ and ‘<code
|
|
class=css>inline-table</code>’ elements. When ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’, the UA may apply the border-radius
|
|
properties to ‘<code class=css>table</code>’ and ‘<code
|
|
class=css>inline-table</code>’ elements, but is not required to. In
|
|
this case not only must the border radii of adjacent corners not
|
|
intersect, but the horizontal and vertical radii of a single corner may
|
|
not extend past the boundaries of the cell at that corner (i.e. the cell's
|
|
other corners must not be affected by this corner's border-radius). If the
|
|
computed values of the border radii would cause this effect, then the used
|
|
values of all the border radii of the table must be reduced by the same
|
|
factor so that the radii neither intersect nor extend past the boundaries
|
|
of their respective corner cells.
|
|
|
|
<p>The effect of border-radius on <a
|
|
href="http://www.w3.org/TR/CSS21/tables.html#tables-intro">internal table
|
|
elements</a> is undefined in CSS3 Backgrounds and Borders, but may be
|
|
defined in a future specification. CSS3 UAs <em>should</em> ignore
|
|
border-radius properties applied to internal table elements when
|
|
‘<code class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’.
|
|
|
|
<div class=example>
|
|
<p>This example draws ovals of 15em wide and 10em high:
|
|
|
|
<pre>
|
|
DIV.standout {
|
|
width: 13em;
|
|
height: 8em;
|
|
border: solid black 1em;
|
|
border-radius: 7.5em 5em }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=border-images><span class=secno>6. </span>Border Images</h2>
|
|
|
|
<p>Authors can specify an image to be used in place of the border styles.
|
|
In this case, the border's design is taken from the sides and corners of
|
|
an image specified with ‘<a href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’, whose pieces may be
|
|
sliced, scaled and stretched in various ways to fit the size of the <a
|
|
href="#border-image-area"><em>border image area.</em></a> The border-image
|
|
properties do not affect layout: layout of the box, its content, and
|
|
surrounding content is based on the ‘<a href="#border-width"><code
|
|
class=property>border-width</code></a>’ and ‘<a
|
|
href="#border-style"><code class=property>border-style</code></a>’
|
|
properties only.
|
|
|
|
<div class=example>
|
|
<p>This example creates a top and bottom border consisting of a whole
|
|
number of orange diamonds and a left and right border of a single,
|
|
stretched diamond. The corners are diamonds of a different color. The
|
|
image to tile is as follows. Apart from the diamonds, it is transparent:
|
|
|
|
<p><img alt="Tile for border" src=border.png>
|
|
|
|
<p>The image is 81 by 81 pixels and has to be divided into 9 equal parts.
|
|
The style rules could thus be as follows:
|
|
|
|
<pre>
|
|
DIV {
|
|
border: double orange 1em;
|
|
border-image: url("border.png") 27 round stretch;
|
|
}
|
|
</pre>
|
|
|
|
<p>The result, when applied to a DIV of 12 by 5em, will be similar to
|
|
this:
|
|
|
|
<p><img alt="element with a diamond border" src=borderresult.png>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This shows a more complicated example, demonstrating how the border
|
|
image corresponds to the fallback border-style but can also extend beyond
|
|
the border area. The border image is a wavy green border with an extended
|
|
corner effect:</p>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram: The border image shows a wavy green border with
|
|
more exaggerated waves towards the corners, which are capped by a
|
|
disconnected green circle. Four cuts at 124px offsets from each side
|
|
divide the image into 124px-wide square corners, 124px-wide but thin
|
|
side slices, and a small center square."
|
|
src=groovy-border-image-slice.png>
|
|
|
|
<p class=caption>The ‘<a href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’ image, with the
|
|
four ‘<a href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’ cuts at 124px
|
|
dividing the image into nine parts.</p>
|
|
</div>
|
|
|
|
<p>The rest of the border properties then interact to lay out the tiles as
|
|
follows:</p>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram: The image-less (fallback) rendering has a green
|
|
double border. The rendering with border-image shows the wavy green
|
|
border, with the waves getting longer as they reach the corners. The
|
|
corner tiles render as 124px-wide squares and the side tiles repeat a
|
|
whole number of times to fill the space in between. Because of the
|
|
gradual corner effects, the tiles extend deep into the padding area. The
|
|
whole border image effect is outset 31px, so that the troughs of the
|
|
waves align just outside the padding edge." src=border-image.png>
|
|
|
|
<p class=caption>Diagram of all border-image properties and how they
|
|
interact, and showing the rendering with and without the border-image in
|
|
effect.</p>
|
|
</div>
|
|
|
|
<p>Here, even though the border-width is 12px, the ‘<a
|
|
href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ property computes to
|
|
124px. The border-image area is then outset 31px from the border-box and
|
|
into the margin area. If the border-image fails to load (or border images
|
|
are not supported by the UA), the fallback rendering uses a green double
|
|
border.
|
|
</div>
|
|
|
|
<div class=example id=border-image-border-shorthand-example>
|
|
<p>Notice that the ‘<a href="#border"><code
|
|
class=property>border</code></a>’ shorthand resets ‘<a
|
|
href="#border-image"><code class=property>border-image</code></a>’.
|
|
This makes it easy to turn off or reset all border effects:</p>
|
|
|
|
<pre>
|
|
.notebox {
|
|
border: double orange;
|
|
/* must set 'border' shorthand first, otherwise it erases 'border-image' */
|
|
border-image: url("border.png") 30 round;
|
|
/* but other 'border' properties can be set after */
|
|
border-width: thin thick;
|
|
}
|
|
...
|
|
.sidebar .notebox {
|
|
box-shadow: 0 0 5px gray;
|
|
border-radius: 5px;
|
|
border: none; /* turn off all borders */
|
|
/* 'border' shorthand resets 'border-image' */
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=the-border-image-source><span class=secno>6.1. </span>The ‘<a
|
|
href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image-source>border-image-source</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | <a href="#ltimagegt"><var><image></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements, except internal table elements when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>‘<code class=css>none</code>’ or the image with its URI
|
|
made absolute
|
|
</table>
|
|
|
|
<p>Specifies an image to use instead of the border styles given by the
|
|
‘<a href="#border-style"><code
|
|
class=property>border-style</code></a>’ properties and as an
|
|
additional background layer for the element. If the value is <dfn id=none1
|
|
title="''none''!!'border-image-source' value">‘<code
|
|
class=css>none</code>’</dfn> or if the image cannot be displayed,
|
|
the border styles will be used.
|
|
|
|
<h3 id=the-border-image-slice><span class=secno>6.2. </span>The ‘<a
|
|
href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image-slice>border-image-slice</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[<var><number></var> | <var><percentage></var>]{1,4}
|
|
&& fill?
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>100%
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements, except internal table elements when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refer to size of the border image
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>The four ‘<a href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’ values represent
|
|
inward offsets from the top, right, bottom, and left edges of the image
|
|
respectively, dividing it into nine regions: four corners, four edges and
|
|
a middle. The middle image part is discarded (treated as fully
|
|
transparent) unless the ‘<code class=css>fill</code>’ keyword
|
|
is present. (It is drawn over the background; see the <a
|
|
href="#border-image-process">border-image drawing process</a>.)
|
|
|
|
<p>If the fourth number/percentage is absent, it is the same as the second.
|
|
If the third one is also absent, it is the same as the first. If the
|
|
second one is also absent, it is the same as the first.
|
|
|
|
<dl>
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>Percentages are relative to the size of the image: the width of the
|
|
image for the horizontal offsets, the height for vertical offsets.
|
|
|
|
<dt><var><number></var>
|
|
|
|
<dd>Numbers represent pixels in the image (if the image is a raster image)
|
|
or vector coordinates (if the image is a vector image).
|
|
|
|
<dt><dfn id=border-image-slice-fill>‘<code
|
|
class=css>fill</code>’</dfn>
|
|
|
|
<dd>The ‘<code class=css>fill</code>’ keyword, if present,
|
|
causes the middle part of the border-image to be preserved. (By default
|
|
it is discarded, i.e., treated as empty.)
|
|
</dl>
|
|
|
|
<p>Negative values are not allowed and values bigger than the size of the
|
|
image are interpreted as ‘<code class=css>100%</code>’.
|
|
|
|
<p>The regions given by the ‘<a href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’ 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.
|
|
|
|
<div class=figure>
|
|
<p><img alt="Diagram: two horizontal cuts and two vertical cuts through an
|
|
image" src=slice>
|
|
|
|
<p class=caption>Diagram illustrating the cuts corresponding to the value
|
|
‘<code class=css>25% 30% 12% 20%</code>’
|
|
</div>
|
|
|
|
<h3 id=the-border-image-width><span class=secno>6.3. </span>The ‘<a
|
|
href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image-width>border-image-width</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <var><length></var> | <var><percentage></var> |
|
|
<var><number></var> | auto ]{1,4}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements, except table elements when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>Relative to width/height of the <a
|
|
href="#border-image-area"><em>border image area</em></a>
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>all <var><length></var>s made absolute, otherwise as specified
|
|
|
|
</table>
|
|
|
|
<p>The border image is drawn inside an area called the <a
|
|
href="#border-image-area"><em>border image area</em></a>. This is an area
|
|
whose boundaries by default correspond to the border box, see ‘<a
|
|
href="#border-image-outset"><code
|
|
class=property>border-image-outset</code></a>’.
|
|
|
|
<p>The four values of ‘<a href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ 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 fourth value is absent, it is the same as the
|
|
second. If the third one is also absent, it is the same as the first. If
|
|
the second one is also absent, it is the same as the first. Values have
|
|
the following meanings:
|
|
|
|
<dl>
|
|
<dt><var><percentage></var>
|
|
|
|
<dd>Percentages refer to the size of the border image area: the width of
|
|
the area for horizontal offsets, the height for vertical offsets.
|
|
|
|
<dt><var><number></var>
|
|
|
|
<dd>Numbers represent multiples of the corresponding computed <a
|
|
href="#the-border-width">border-width</a>.
|
|
|
|
<dt><dfn id=auto0 title="''auto''!!'border-image-width'
|
|
value">‘<code class=css>auto</code>’</dfn>
|
|
|
|
<dd>If ‘<code class=css>auto</code>’ is specified then the
|
|
border image width is the intrinsic width or height (whichever is
|
|
applicable) of the corresponding image slice (see ‘<a
|
|
href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’). If the image does
|
|
not have the required intrinsic dimension then the corresponding <a
|
|
href="#the-border-width">border-width</a> is used instead.
|
|
</dl>
|
|
|
|
<p class=issue>Are percentages of the border-image area useful? Should
|
|
percentages be used instead of numbers for ratios?
|
|
|
|
<p>Negative values are not allowed for any ‘<a
|
|
href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ values.
|
|
|
|
<p>If two opposite ‘<a href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ offsets are large
|
|
enough that they overlap, then the used values of all ‘<a
|
|
href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ offsets are
|
|
proportionally reduced until they no longer overlap. In mathematical
|
|
notation: Given <var>L<sub>width</sub></var> as the width of the border
|
|
image area, <var>L<sub>height</sub></var> as its height, and
|
|
<var>W<sub><var>side</var></sub></var> as the border image width offset
|
|
for the <var>side</var> side, let <var>f</var> =
|
|
min(<var>L<sub>width</sub></var>/(<var>W<sub>left</sub></var>+<var>W<sub>right</sub></var>),
|
|
<var>L<sub>height</sub></var>/(<var>W<sub>top</sub></var>+<var>W<sub>bottom</sub></var>)).
|
|
If <var>f</var> < 1, then all <var>W</var> are reduced by multiplying
|
|
them by <var>f</var>.
|
|
|
|
<h3 id=the-border-image-outset><span class=secno>6.4. </span>The ‘<a
|
|
href="#border-image-outset"><code
|
|
class=property>border-image-outset</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image-outset>border-image-outset</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <var><length></var> | <var><number></var> ]{1,4}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements, except internal table elements when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>all <var><length></var>s made absolute, otherwise as specified
|
|
|
|
</table>
|
|
|
|
<p>The values specify the amount by which the <dfn
|
|
id=border-image-area>border image area</dfn> extends beyond the border box
|
|
on the top, right, bottom, and left sides respectively. If the fourth
|
|
value is absent, it is the same as the second. If the third one is also
|
|
absent, it is the same as the first. If the second one is also absent, it
|
|
is the same as the first. Numbers represent multiples of the corresponding
|
|
<a href="#the-border-width">border-width</a>.
|
|
|
|
<p>Negative values are not allowed for any of the ‘<a
|
|
href="#border-image-outset"><code
|
|
class=property>border-image-outset</code></a>’ values.
|
|
|
|
<p>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.
|
|
|
|
<p class=note>Note that, even though they never cause a scrolling
|
|
mechanism, they may still be clipped by an ancestor or by the viewport.
|
|
|
|
<h3 id=the-border-image-repeat><span class=secno>6.5. </span>The ‘<a
|
|
href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image-repeat>border-image-repeat</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ stretch | repeat | round ]{1,2}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>stretch
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>All elements, except internal table elements when ‘<code
|
|
class=property>border-collapse</code>’ is ‘<code
|
|
class=css>collapse</code>’
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property specifies how the images for the sides and the middle part
|
|
of the border image are scaled and tiled. If the second keyword is absent,
|
|
it is assumed to be the same as the first. Values have the following
|
|
meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=stretch>‘<code class=css>stretch</code>’</dfn>
|
|
|
|
<dd>The image is stretched to fill the area.
|
|
|
|
<dt><dfn id=repeat0 title="''repeat''!!'border-image-repeat'
|
|
value">‘<code class=css>repeat</code>’</dfn>
|
|
|
|
<dd>The image is tiled (repeated) to fill the area.
|
|
|
|
<dt><dfn id=round0 title="''round''!!'border-image-repeat'
|
|
value">‘<code class=css>round</code>’</dfn>
|
|
|
|
<dd>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.
|
|
|
|
<dt><dfn id=space0 title="''space''!!'border-image-repeat'
|
|
value">‘<code class=css>space</code>’</dfn>
|
|
|
|
<dd>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.
|
|
</dl>
|
|
|
|
<p>The exact process for scaling and tiling the border-image parts is given
|
|
in the section below.
|
|
|
|
<h3 id=border-image-process><span class=secno>6.6. </span>Border-image
|
|
drawing process</h3>
|
|
|
|
<p>After the border-image given by ‘<a
|
|
href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’ is sliced by the
|
|
‘<a href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’ values, the resulting
|
|
nine images are scaled, positioned, and tiled into their corresponding
|
|
border image regions in four steps:
|
|
|
|
<ol>
|
|
<li>Scale to ‘<a href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’.
|
|
<ul>
|
|
<li>
|
|
<p>The two images for the top and bottom edges are made as tall as the
|
|
top and bottom <a href="#border-image-area"><em>border image
|
|
area</em></a> parts, respectively, and their width is scaled
|
|
proportionally.
|
|
|
|
<li>
|
|
<p>The images for the left and right edge are made as wide as the left
|
|
and right <a href="#border-image-area"><em>border image area</em></a>
|
|
parts, respectively, and their height is scaled proportionally.
|
|
|
|
<li>
|
|
<p>The corner images are scaled to be as wide and as tall as the two
|
|
border-image edges they are part of.
|
|
|
|
<li>
|
|
<p>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.</p>
|
|
</ul>
|
|
|
|
<li>Scale to ‘<a href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’.
|
|
<ul>
|
|
<li>
|
|
<p>If the first keyword is ‘<code
|
|
class=css>stretch</code>’, the top, middle and bottom images are
|
|
further scaled to be as wide as the middle part of the <a
|
|
href="#border-image-area">border image area.</a> The height is not
|
|
changed any further.
|
|
|
|
<li>
|
|
<p>If the first keyword is ‘<code class=css>round</code>’,
|
|
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 ‘<code
|
|
class=css>round</code>’ in the ‘<a
|
|
href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ property.
|
|
|
|
<li>
|
|
<p>If the first keyword is ‘<code class=css>repeat</code>’
|
|
or ‘<code class=css>space</code>’, the top, middle, and
|
|
bottom images are not changed any further.
|
|
|
|
<li>
|
|
<p>The effects of ‘<code class=css>stretch</code>’,
|
|
‘<code class=css>round</code>’, ‘<code
|
|
class=css>repeat</code>’, and ‘<code
|
|
class=css>space</code>’ for the second keyword are analogous,
|
|
acting on the height of the left, middle and right images.
|
|
</ul>
|
|
|
|
<li>Position the first tile.
|
|
<ul>
|
|
<li>
|
|
<p>If the first keyword is ‘<code class=css>repeat</code>’,
|
|
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.
|
|
|
|
<li>
|
|
<p>If the second keyword is ‘<code
|
|
class=css>repeat</code>’, 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.
|
|
</ul>
|
|
|
|
<li>Tile and draw.
|
|
<ul>
|
|
<li>
|
|
<p>The images are then tiled to fill their respective areas. All images
|
|
are drawn at the same stacking level as normal borders: immediately in
|
|
front of the background layers.
|
|
|
|
<li>
|
|
<p>In the case of ‘<code class=css>space</code>’, 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.)
|
|
<span class=note>This can result in empty border-image side
|
|
areas.</span>
|
|
</ul>
|
|
</ol>
|
|
|
|
<h3 id=the-border-image><span class=secno>6.7. </span>The ‘<a
|
|
href="#border-image"><code class=property>border-image</code></a>’
|
|
shorthand</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=border-image>border-image</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td> <var><‘<a href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’></var> ||
|
|
<var><‘<a href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’></var> [ /
|
|
<var><‘<a href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’></var>? [ /
|
|
<var><‘<a href="#border-image-outset"><code
|
|
class=property>border-image-outset</code></a>’></var> ]? ]? ||
|
|
<var><‘<a href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’></var>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>See individual properties
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>See individual properties
|
|
</table>
|
|
|
|
<p>This is a shorthand property for setting ‘<a
|
|
href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’, ‘<a
|
|
href="#border-image-slice"><code
|
|
class=property>border-image-slice</code></a>’, ‘<a
|
|
href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’, ‘<a
|
|
href="#border-image-outset"><code
|
|
class=property>border-image-outset</code></a>’ and ‘<a
|
|
href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’. Omitted values are
|
|
set to their initial values.
|
|
|
|
<h2 id=misc><span class=secno>7. </span>Miscellaneous Effects</h2>
|
|
|
|
<h3 id=the-box-decoration-break><span class=secno>7.1. </span>The ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=box-decoration-break>box-decoration-break</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>slice | clone
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>slice
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>When a box is broken at a page break, column break, or, for inline
|
|
elements, at a line break, the ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’ property specifies
|
|
whether individual boxes are treated as broken pieces of one continuous
|
|
box, or whether each box is individually wrapped with the border and
|
|
padding. For backgrounds it defines how the <a class=index
|
|
href="#background-positioning-area"
|
|
id=background-positioning-area2>background positioning area</a> is derived
|
|
from these multiple boxes and how the element's background is drawn within
|
|
them. Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=clone>‘<code class=css>clone</code>’</dfn>
|
|
|
|
<dd>Each box is independently wrapped with the border and padding. The
|
|
‘<a href="#border-radius"><code
|
|
class=property>border-radius</code></a>’ and ‘<a
|
|
href="#border-image"><code class=property>border-image</code></a>’
|
|
and ‘<a href="#box-shadow"><code
|
|
class=property>box-shadow</code></a>’, if any, are applied to each
|
|
box independently. The background is drawn independently in each box of
|
|
the element. A no-repeat background image will thus be rendered once in
|
|
each box of the element.
|
|
|
|
<dt><dfn id=slice>‘<code class=css>slice</code>’</dfn>
|
|
|
|
<dd>
|
|
<p>No border and no padding are inserted at the break. No box-shadow is
|
|
drawn at the broken edge; ‘<a href="#border-radius"><code
|
|
class=property>border-radius</code></a>’ does not apply to its
|
|
corners; and the ‘<a href="#border-image"><code
|
|
class=property>border-image</code></a>’ is rendered for the whole
|
|
box as if it were unbroken. The effect is as though the element were
|
|
rendered with no break present, and then sliced by the break afterward.
|
|
|
|
<p>Backgrounds are drawn as if, after the element has been laid out
|
|
(including any justification, bidi reordering, page breaks, etc.), all
|
|
the element's boxes are taken and put one after the other in visual
|
|
order. The background is applied to the bounding box of this composite
|
|
box and then the boxes are put back, with their share of the background.</p>
|
|
|
|
<p>For boxes broken across lines, first boxes on the same line are
|
|
connected in visual order. Then boxes on subsequent lines are ordered
|
|
according to the element's inline progression direction and aligned on
|
|
the baseline. For example in a left-to-right containing block
|
|
(‘<code class=property>direction</code>’ is ‘<code
|
|
class=css>ltr</code>’), the first box is the leftmost box on the
|
|
first line and boxes from subsequent lines are put to the right of it.
|
|
In a right-to-left containing block, the first box is the rightmost on
|
|
the first line and subsequent boxes are put to the left of it.</p>
|
|
|
|
<p>For boxes broken across columns, the columns are treated as one
|
|
continuous element, as if the column boxes were glued together in the
|
|
block progression direction of the multi-column element. For boxes
|
|
broken across pages, the page content areas are glued together in the
|
|
block progression direction of the root element. In these cases, if the
|
|
pieces have different widths (heights, if the root element /
|
|
multi-column element is in vertical text mode), then each piece draws
|
|
its background assuming that the whole element has the same width
|
|
(height) as this piece. This ensures that right-aligned images stay
|
|
aligned to the right edge, left-aligned images stay aligned to the left
|
|
edge, and centered images stay centered.
|
|
</dl>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Illustration: (1) a single box cut in two in between two
|
|
lines of text by a page break and (2) two boxes, one before and one after
|
|
the page break, both with a border all around and their own background
|
|
image" src=box-break.png>
|
|
|
|
<p class=caption>Two possibilities for ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’: on the left, the
|
|
value ‘<code class=css>slice</code>’, on the right the value
|
|
‘<code class=css>clone</code>’.
|
|
</div>
|
|
|
|
<p>For inline elements side of the box that breaks is determined by the
|
|
element's inline progression direction, not that of the containing block.
|
|
For example, the first part of an inline element with ‘<code
|
|
class=css>direction: rtl</code>’ inside a block with ‘<code
|
|
class=css>direction: ltr</code>’ will break on the left side.
|
|
|
|
<h3 id=the-box-shadow><span class=secno>7.2. </span>The ‘<a
|
|
href="#box-shadow"><code class=property>box-shadow</code></a>’
|
|
property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=box-shadow>box-shadow</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | <a href="#ltshadowgt"><var><shadow></var></a> [ , <a
|
|
href="#ltshadowgt"><var><shadow></var></a> ]*
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>any <length> made absolute; any color computed; otherwise as
|
|
specified
|
|
</table>
|
|
|
|
<p>The ‘<a href="#box-shadow"><code
|
|
class=property>box-shadow</code></a>’ property attaches one or more
|
|
drop-shadows to the box. The property is a comma-separated list of
|
|
shadows, each specified by 2-4 length values, an optional color, and an
|
|
optional ‘<code class=css>inset</code>’ keyword. Omitted
|
|
lengths are 0; omitted colors are a UA-chosen color.
|
|
|
|
<p>Where
|
|
|
|
<pre class=prod>
|
|
<dfn id=ltshadowgt><var><shadow></var></dfn> = inset? && [ <var><length></var>{2,4} && <a href="#ltcolorgt"><var><color></var></a>? ]</pre>
|
|
|
|
<p>The components of each <a
|
|
href="#ltshadowgt"><var><shadow></var></a> are interpreted as
|
|
follows:
|
|
|
|
<ul>
|
|
<li>The first length is 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.
|
|
|
|
<li>The second length is the vertical offset. A positive value offsets the
|
|
shadow down, a negative one up.
|
|
|
|
<li>The third length is a 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 below.
|
|
|
|
<li>The fourth length is a spread distance. Positive values cause the
|
|
shadow shape to expand in all directions by the specified radius.
|
|
Negative values cause the shadow shape to contract. See below. <span
|
|
class=note>Note that for inner shadows, expanding the shadow (creating
|
|
more shadow area) means contracting the shadow's perimeter shape.</span>
|
|
|
|
<li>The color is the color of the shadow.
|
|
|
|
<li>The ‘<code class=css>inset</code>’ keyword, if present,
|
|
changes the drop shadow from an outer shadow (one that shadows the box
|
|
onto the canvas, as if it were lifted above the canvas) to an inner
|
|
shadow (one that shadows the canvas onto the box, as if the box were cut
|
|
out of the canvas and shifted behind it).
|
|
</ul>
|
|
|
|
<p>An outer box-shadow casts a shadow as if the border-box of the element
|
|
were opaque. The shadow is drawn outside the border edge only: it is
|
|
clipped inside the border-box of the element.
|
|
|
|
<p>An inner box-shadow casts a shadow as if everything outside the padding
|
|
edge were opaque. The inner shadow is drawn inside the padding edge only:
|
|
it is clipped outside the padding box of the element.
|
|
|
|
<p>If the box has a nonzero <span class=property>‘<a
|
|
href="#border-radius"><code
|
|
class=property>border-radius</code></a>’</span>, the shadow shape is
|
|
rounded in the same way. The ‘<a href="#border-image"><code
|
|
class=property>border-image</code></a>’ does not affect the shape of
|
|
the box-shadow.
|
|
|
|
<p>If a spread distance is defined, the shadow is expanded outward or
|
|
contracted inward by an operation equivalent to applying the absolute
|
|
value of the spread value to a blur operation as defined below and
|
|
thresholding the result such that for a positive spread distance all
|
|
non-transparent pixels are given the full shadow color and for a negative
|
|
spread distance all non-opaque pixels are made transparent. The UA may
|
|
approximate this operation by taking an outward outset of the specified
|
|
amount normal to the original shadow perimeter. Alternatively the UA may
|
|
approximate the transformed shadow perimeter shape by outsetting
|
|
(insetting, for inner shadows) the shadow's straight edges by the spread
|
|
distance and increasing (decreasing, for inner shadows) and flooring at
|
|
zero the corner radii by the same amount. (The UA may even combine these
|
|
methods, using one method for outer shadows and another for inner ones.)
|
|
For corners with a zero border-radius, however, the corner must remain
|
|
sharp—the operation is equivalent to scaling the shadow shape. In
|
|
any case, the effective width and height of the shadow shape is floored at
|
|
zero. (A zero-sized shadow shape would cause an outer shadow to disappear,
|
|
and an inner shadow to cover the entire padding-box.)
|
|
|
|
<p>A non-zero blur distance indicates that the resulting shadow should be
|
|
blurred, such as by a Gaussian filter. The exact algorithm is not defined;
|
|
however the resulting shadow must approximate (with each pixel being
|
|
within 5% of its expected value) the image that would be generated by
|
|
applying to the shadow a Gaussian blur with a standard deviation equal to
|
|
half the blur radius
|
|
|
|
<p class=note>Note this means for a long, straight shadow edge, the blur
|
|
radius will create a visibly apparent color transition approximately the
|
|
twice length of the blur radius that is perpendicular to and centered on
|
|
the shadow's edge, and that ranges from the full shadow color at the
|
|
endpoint inside the shadow to fully transparent at the endpoint outside
|
|
it.
|
|
|
|
<div class=example>
|
|
<p>The example below demonstrates the effects of spread and blur on the
|
|
shadow:</p>
|
|
|
|
<p class=figure> <img alt="An example of spread and blur on a box with two
|
|
round corners and two square ones" src=spread-blur.png></p>
|
|
</div>
|
|
|
|
<p>The shadow effects are applied front-to-back: the first shadow is on top
|
|
and the others are layered behind. Shadows do not influence layout and may
|
|
overlap other boxes or their shadows. In terms of stacking contexts and
|
|
the painting order, the outer shadows of an element are drawn immediately
|
|
below the background of that element, and the inner shadows of an element
|
|
are drawn immediately above the background of that element (below the
|
|
borders and border image, if any).
|
|
|
|
<p>If an element has multiple boxes, all of them get drop shadows, but
|
|
shadows are only drawn where borders would also be drawn; see ‘<a
|
|
href="#box-decoration-break"><code
|
|
class=property>box-decoration-break</code></a>’.
|
|
|
|
<p>Shadows do not trigger scrolling or increase the size of the scrollable
|
|
area.
|
|
|
|
<div class=example>
|
|
<p>Below are some examples of an orange box with a blue border being being
|
|
given a drop shadow.</p>
|
|
|
|
<table class=data id=box-shadow-samples>
|
|
<tbody>
|
|
<tr>
|
|
<th scope=rowgroup>
|
|
<pre><code><!--
|
|
-->border:5px solid blue;
|
|
<!-- -->background-color:orange;
|
|
<!-- -->width: 144px;
|
|
<!-- -->height: 144px;<!--
|
|
--></code></pre>
|
|
|
|
<th>
|
|
<pre><code>border-radius: 20px;</code></pre>
|
|
|
|
<th>
|
|
<pre><code>border-radius: 0;</code></pre>
|
|
|
|
<tr>
|
|
<th>
|
|
<pre><code><!--
|
|
-->box-shadow:
|
|
<!-- --> rgba(0,0,0,0.4)
|
|
<!-- --> 10px 10px;<!--
|
|
--></code></pre>
|
|
|
|
<td> <img alt="A round-cornered box with a light gray shadow the same
|
|
shape as the border box offset 10px to the right and 10px down from
|
|
directly underneath the box." height=175 src=shadow-outer-round.png
|
|
width=175>
|
|
|
|
<td> <img alt="A square-cornered box with a light gray shadow the same
|
|
shape as the border box offset 10px to the right and 10px down from
|
|
directly underneath the box." height=175 src=shadow-outer-square.png
|
|
width=175>
|
|
|
|
<tr>
|
|
<th>
|
|
<pre><code><!--
|
|
-->box-shadow:
|
|
<!-- --> rgba(0,0,0,0.4)
|
|
<!-- --> 10px 10px
|
|
<!-- --> inset<!--
|
|
--></code></pre>
|
|
|
|
<td> <img alt="A round-cornered box with a light gray shadow the
|
|
inverse shape of the padding box filling 10px in from the top and left
|
|
edges (just inside the border)." height=175 src=shadow-inner-round.png
|
|
width=175>
|
|
|
|
<td> <img alt="A square-cornered box with a light gray shadow the
|
|
inverse shape of the padding box filling 10px in from the top and left
|
|
edges (just inside the border)." height=175
|
|
src=shadow-inner-square.png width=175>
|
|
|
|
<tr>
|
|
<th>
|
|
<pre><code><!--
|
|
-->box-shadow:
|
|
<!-- --> rgba(0,0,0,0.4)
|
|
<!-- --> 10px 10px 0
|
|
<!-- --> 10px /* spread */<!--
|
|
--></code></pre>
|
|
|
|
<td> <img alt="A round-cornered box with a light gray shadow the same
|
|
shape as the box but 20px taller and wider and offset so that the top
|
|
and left edges of the shadow are directly underneath the top and left
|
|
edges of the box." height=175 src=shadow-outer-spread-round.png
|
|
width=175>
|
|
|
|
<td> <img alt="A square-cornered box with a light gray shadow the same
|
|
shape as the box but 20px taller and wider and offset so that the top
|
|
and left edges of the shadow are directly underneath the top and left
|
|
edges of the box." height=175 src=shadow-outer-spread-square.png
|
|
width=175>
|
|
|
|
<tr>
|
|
<th>
|
|
<pre><code><!--
|
|
-->box-shadow:
|
|
<!-- --> rgba(0,0,0,0.4)
|
|
<!-- --> 10px 10px 0
|
|
<!-- --> 10px /* spread */
|
|
<!-- --> inset<!--
|
|
--></code></pre>
|
|
|
|
<td> <img alt="A round-cornered box with a light gray shadow the
|
|
inverse shape of the box but 20px narrower and shorter filling 20px in
|
|
from the top and left edges (just inside the border)." height=175
|
|
src=shadow-inner-spread-round.png width=175>
|
|
|
|
<td> <img alt="A round-cornered box with a light gray shadow the
|
|
inverse shape of the box but 20px narrower and shorter filling 20px in
|
|
from the top and left edges (just inside the border)." height=175
|
|
src=shadow-inner-spread-square.png width=175>
|
|
</table>
|
|
</div>
|
|
|
|
<p>The ‘<a href="#box-shadow"><code
|
|
class=css>box-shadow</code></a>’ property applies to the
|
|
‘<code class=css>::first-letter</code>’ pseudo-element, but
|
|
not the ‘<code class=css>::first-line</code>’ pseudo-element.
|
|
Outer shadows have no effect on internal table elements in the collapsing
|
|
border model. If a shadow is defined for single border edge in the
|
|
collapsing border model that has multiple border thicknesses (e.g. an
|
|
outer shadow on a table where one row has thicker borders than the others,
|
|
or an inner shadow on a rowspanning table cell that adjoins cells with
|
|
different border thicknesses), the exact position and rendering of its
|
|
shadows are undefined.
|
|
|
|
<h2 id=definitions><span class=secno>8. </span>Definitions</h2>
|
|
|
|
<h3 id=glossary><span class=secno>8.1. </span>Glossary</h3>
|
|
|
|
<p>The following terms and abbreviations are used in this module.
|
|
|
|
<dl>
|
|
<dt><dfn id=ua>UA</dfn>
|
|
|
|
<dt><dfn id=user-agent>User Agent</dfn>
|
|
|
|
<dd>
|
|
<p>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 <a href="#document">documents</a> (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.)
|
|
|
|
<dt><dfn id=document title="document|documents">document</dfn>
|
|
|
|
<dd>
|
|
<p>A tree-structured document with elements and attributes, such as an
|
|
SGML or XML document <a href="#XML11"
|
|
rel=biblioentry>[XML11]<!--{{XML11}}--></a>.
|
|
|
|
<dt><dfn id=style-sheet>style sheet</dfn>
|
|
|
|
<dd>
|
|
<p>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
</dl>
|
|
|
|
<h3 id=conformance><span class=secno>8.2. </span>Conformance</h3>
|
|
|
|
<p>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. <a href="#RFC2119"
|
|
rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p>Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p>Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<p>Conformance to CSS Backgrounds and Borders Level 3 is defined for three
|
|
classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=style-sheet0 title="style sheet!!as conformance class">style
|
|
sheet</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
|
|
<dt><dfn id=renderer>renderer</dfn>
|
|
|
|
<dd>A UA that interprets the semantics of a style sheet and renders <a
|
|
href="#document">documents</a> that use them.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd>A UA that writes a style sheet.
|
|
</dl>
|
|
|
|
<p>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.
|
|
|
|
<p>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.)
|
|
|
|
<p>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.
|
|
|
|
<h3 id=levels><span class=secno>8.3. </span>Levels</h3>
|
|
|
|
<p><em>This section is informative.</em> CSS has different levels of
|
|
features, each a subset of the other. (See <a href="#CSSBEIJING"
|
|
rel=biblioentry>[CSSBEIJING]<!--{{CSSBEIJING}}--></a> for a full
|
|
explanation.) The lists below describe which features from this
|
|
specification are in each level.
|
|
|
|
<h4 id=level-1><span class=secno>8.3.1. </span>CSS Level 1</h4>
|
|
|
|
<ul>
|
|
<li>‘<a href="#background-color"><code
|
|
class=property>background-color</code></a>’
|
|
|
|
<li>‘<a href="#background-image"><code
|
|
class=property>background-image</code></a>’ only one image (no
|
|
layers)
|
|
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’: only ‘<code
|
|
class=property>repeat</code>’ | ‘<code
|
|
class=property>repeat-x</code>’ | ‘<code
|
|
class=property>repeat-y</code>’ | ‘<code
|
|
class=property>no-repeat</code>’
|
|
|
|
<li>‘<a href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’: only ‘<a
|
|
href="#scroll0"><code class=property>scroll</code></a>’ | ‘<a
|
|
href="#fixed0"><code class=property>fixed</code></a>’
|
|
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’: only one or two
|
|
values allowed
|
|
|
|
<li>‘<a href="#background"><code
|
|
class=property>background</code></a>’ shorthand: only color, image,
|
|
repeat, attachment and position
|
|
|
|
<li>‘<a href="#border-color"><code
|
|
class=property>border-color</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-style"><code
|
|
class=property>border-style</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-width"><code
|
|
class=property>border-width</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-top"><code
|
|
class=property>border-top</code></a>’, ‘<a
|
|
href="#border-bottom"><code
|
|
class=property>border-bottom</code></a>’, ‘<a
|
|
href="#border-right"><code class=property>border-right</code></a>’,
|
|
‘<a href="#border-left"><code
|
|
class=property>border-left</code></a>’, and ‘<a
|
|
href="#border"><code class=property>border</code></a>’ shorthands
|
|
</ul>
|
|
|
|
<h4 id=level-2><span class=secno>8.3.2. </span>CSS Level 2</h4>
|
|
|
|
<ul>
|
|
<li>‘<a href="#background-color"><code
|
|
class=property>background-color</code></a>’
|
|
|
|
<li>‘<a href="#background-image"><code
|
|
class=property>background-image</code></a>’: only one image (no
|
|
layers)
|
|
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’: only ‘<code
|
|
class=property>repeat</code>’ | ‘<code
|
|
class=property>repeat-x</code>’ | ‘<code
|
|
class=property>repeat-y</code>’ | ‘<code
|
|
class=property>no-repeat</code>’
|
|
|
|
<li>‘<a href="#background-attachment"><code
|
|
class=property>background-attachment</code></a>’: only ‘<a
|
|
href="#scroll0"><code class=property>scroll</code></a>’ | ‘<a
|
|
href="#fixed0"><code class=property>fixed</code></a>’
|
|
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’: only one or two
|
|
values allowed
|
|
|
|
<li>‘<a href="#background"><code
|
|
class=property>background</code></a>’: only color, image, repeat,
|
|
attachment and position
|
|
|
|
<li>‘<a href="#border-color"><code
|
|
class=property>border-color</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-style"><code
|
|
class=property>border-style</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-width"><code
|
|
class=property>border-width</code></a>’ properties
|
|
|
|
<li>‘<a href="#border-top"><code
|
|
class=property>border-top</code></a>’, ‘<a
|
|
href="#border-bottom"><code
|
|
class=property>border-bottom</code></a>’, ‘<a
|
|
href="#border-right"><code class=property>border-right</code></a>’,
|
|
‘<a href="#border-left"><code
|
|
class=property>border-left</code></a>’, and ‘<a
|
|
href="#border"><code class=property>border</code></a>’ shorthands
|
|
</ul>
|
|
|
|
<h4 id=level-3><span class=secno>8.3.3. </span>CSS Level 3</h4>
|
|
|
|
<ul>
|
|
<li>All features described in the CSS Backgrounds and Borders Module Level
|
|
3
|
|
</ul>
|
|
|
|
<h3 id=exit><span class=secno>8.4. </span>CR exit criteria</h3>
|
|
|
|
<p>As described in the W3C process document, a <a
|
|
href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">Candidate
|
|
Recommendation</a> (CR) is a specification that W3C recommends for use on
|
|
the Web. The next stage is “Recommendation,” when the specification is
|
|
sufficiently implemented.
|
|
|
|
<p>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:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>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.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>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.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>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.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p>A minimum of three 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.
|
|
|
|
<p>Features will be dropped if two or more interoperable implementations
|
|
are not found by the end of the CR period.
|
|
|
|
<p>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.
|
|
|
|
<h2 id=changes><span class=secno>9. </span>Changes Since the 17 December
|
|
2009 Candidate Recommendation</h2>
|
|
|
|
<p>The following changes were made to this specification since the <a
|
|
href="http://www.w3.org/TR/2009/CR-css3-background-20091217/">17 December
|
|
2009 Candidate Recommendation</a>:
|
|
|
|
<ul>
|
|
<li>Addition of ‘<code class=css>content-box</code>’ value of
|
|
‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’.
|
|
|
|
<li>Change to the ‘<a href="#background"><code
|
|
class=property>background</code></a>’ shorthand syntax for
|
|
‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ and ‘<a
|
|
href="#background-origin"><code
|
|
class=property>background-origin</code></a>’.
|
|
|
|
<li>Removal of recommendation to use gradients for color transitions when
|
|
‘<a href="#border-radius"><code
|
|
class=property>border-radius</code></a>’ produces a curve.
|
|
|
|
<li>(Re)Addition of ‘<a href="#box-shadow"><code
|
|
class=css>box-shadow</code></a>’ property.
|
|
|
|
<li>Various clarifications.
|
|
</ul>
|
|
|
|
<h2 id=acknowledgments><span class=secno>10. </span>Acknowledgments</h2>
|
|
|
|
<p>Tapas Roy was editor of the Border Module, before it was merged with the
|
|
Background Module.
|
|
|
|
<p>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 ‘<a
|
|
href="#border-radius"><code class=property>border-radius</code></a>’
|
|
syntax; to Zack Weinberg for the corner transition regions diagram.
|
|
|
|
<p>A set of properties for border images was initially proposed by
|
|
<em>fantasai.</em> 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.)
|
|
|
|
<p>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 <a
|
|
href="http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html">radical
|
|
changes</a> to the ‘<a href="#border-image"><code
|
|
class=property>border-image</code></a>’ property that solved a
|
|
number of problems with the earlier definition.
|
|
|
|
<h2 id=references><span class=secno>11. </span>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2009/CR-CSS2-20090908"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 8 September
|
|
2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/CR-CSS2-20090908">http://www.w3.org/TR/2009/CR-CSS2-20090908</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3COLOR>[CSS3COLOR]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
|
|
href="http://www.w3.org/TR/2010/PR-css3-color-20101028"><cite>CSS Color
|
|
Module Level 3.</cite></a> 28 October 2010. W3C Proposed Recommendation.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/PR-css3-color-20101028">http://www.w3.org/TR/2010/PR-css3-color-20101028</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML401>[HTML401]
|
|
|
|
<dd>David Raggett; Ian Jacobs; Arnaud Le Hors. <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
|
|
Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XHTML11>[XHTML11]
|
|
|
|
<dd>Murray Altheim; Shane McCarron. <a
|
|
href="http://www.w3.org/TR/2001/REC-xhtml11-20010531"><cite>XHTML™
|
|
1.1 - Module-based XHTML.</cite></a> 31 May 2001. W3C Recommendation.
|
|
URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-xhtml11-20010531">http://www.w3.org/TR/2001/REC-xhtml11-20010531</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS1>[CSS1]
|
|
|
|
<dd>Håkon Wium Lie; Bert Bos. <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
|
|
Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSSBEIJING>[CSSBEIJING]
|
|
|
|
<dd>Elika J. Etemad. <a
|
|
href="http://www.w3.org/TR/2010/WD-css-beijing-20100727"><cite>Cascading
|
|
Style Sheets (CSS) Snapshot 2007.</cite></a> 27 July 2010. W3C Working
|
|
Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/WD-css-beijing-20100727">http://www.w3.org/TR/2010/WD-css-beijing-20100727</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=WCAG20>[WCAG20]
|
|
|
|
<dd>Michael Cooper; et al. <a
|
|
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211"><cite>Web Content
|
|
Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211">http://www.w3.org/TR/2008/REC-WCAG20-20081211</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=XML11>[XML11]
|
|
|
|
<dd>Eve Maler; et al. <a
|
|
href="http://www.w3.org/TR/2006/REC-xml11-20060816"><cite>Extensible
|
|
Markup Language (XML) 1.1 (Second Edition).</cite></a> 16 August 2006.
|
|
W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2006/REC-xml11-20060816">http://www.w3.org/TR/2006/REC-xml11-20060816</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background">background</a>
|
|
|
|
<td>[ <bg-layer> , ]* <final-bg-layer>
|
|
|
|
<td>see individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>see individual properties
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#background-attachment">background-attachment</a>
|
|
|
|
<td><attachment> [ , <attachment> ]*
|
|
|
|
<td>scroll
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-clip">background-clip</a>
|
|
|
|
<td><box> [ , <box> ]*
|
|
|
|
<td>border-box
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-color">background-color</a>
|
|
|
|
<td><color>
|
|
|
|
<td>transparent
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-image">background-image</a>
|
|
|
|
<td><bg-image> [ , <bg-image> ]*
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-origin">background-origin</a>
|
|
|
|
<td><box> [ , <box> ]*
|
|
|
|
<td>padding-box
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#background-position">background-position</a>
|
|
|
|
<td><bg-position> [ , <bg-position> ]*
|
|
|
|
<td>0% 0%
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>refer to size of background positioning area minus size of
|
|
background image; see text
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-repeat">background-repeat</a>
|
|
|
|
<td><repeat-style> [ , <repeat-style> ]*
|
|
|
|
<td>repeat
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#background-size">background-size</a>
|
|
|
|
<td><bg-size> [ , <bg-size> ]*
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>see text
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border">border</a>
|
|
|
|
<td><border-width> || <border-style> || <color>
|
|
|
|
<td>See individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-color">border-color</a>
|
|
|
|
<td><color>{1,4}
|
|
|
|
<td>(see individual properties)
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-image">border-image</a>
|
|
|
|
<td><‘border-image-source’> ||
|
|
<‘border-image-slice’> [ /
|
|
<‘border-image-width’>? [ /
|
|
<‘border-image-outset’> ]? ]? ||
|
|
<‘border-image-repeat’>
|
|
|
|
<td>See individual properties
|
|
|
|
<td>See individual properties
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#border-image-outset">border-image-outset</a>
|
|
|
|
<td>[ <length> | <number> ]{1,4}
|
|
|
|
<td>0
|
|
|
|
<td>All elements, except internal table elements when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#border-image-repeat">border-image-repeat</a>
|
|
|
|
<td>[ stretch | repeat | round ]{1,2}
|
|
|
|
<td>stretch
|
|
|
|
<td>All elements, except internal table elements when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-image-slice">border-image-slice</a>
|
|
|
|
<td>[<number> | <percentage>]{1,4} && fill?
|
|
|
|
<td>100%
|
|
|
|
<td>All elements, except internal table elements when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>refer to size of the border image
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#border-image-source">border-image-source</a>
|
|
|
|
<td>none | <image>
|
|
|
|
<td>none
|
|
|
|
<td>All elements, except internal table elements when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-image-width">border-image-width</a>
|
|
|
|
<td>[ <length> | <percentage> | <number> | auto ]{1,4}
|
|
|
|
<td>1
|
|
|
|
<td>All elements, except table elements when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>Relative to width/height of the border image area
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-radius">border-radius</a>
|
|
|
|
<td>[ <length> | <percentage> ]{1,4} [ / [ <length> |
|
|
<percentage> ]{1,4} ]?
|
|
|
|
<td>0
|
|
|
|
<td>all elements, except table element when
|
|
‘border-collapse’ is ‘collapse’
|
|
|
|
<td>no
|
|
|
|
<td>Refer to corresponding dimension of the border box.
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-style">border-style</a>
|
|
|
|
<td><border-style>{1,4}
|
|
|
|
<td>(see individual properties)
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-top">border-top</a>, <a
|
|
class=property href="#border-right">border-right</a>, <a class=property
|
|
href="#border-bottom">border-bottom</a>, <a class=property
|
|
href="#border-left">border-left</a>
|
|
|
|
<td><border-width> || <border-style> || <color>
|
|
|
|
<td>See individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-top-color">border-top-color </a>, <a
|
|
class=property href="#border-right-color">border-right-color</a>, <a
|
|
class=property href="#border-bottom-color">border-bottom-color</a>, <a
|
|
class=property href="#border-left-color">border-left-color</a>
|
|
|
|
<td><color>
|
|
|
|
<td>currentColor
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#border-top-right-radius">border-top-right-radius</a>, <a
|
|
class=property
|
|
href="#border-bottom-right-radius">border-bottom-right-radius</a>, <a
|
|
class=property
|
|
href="#border-bottom-left-radius">border-bottom-left-radius</a>, <a
|
|
class=property
|
|
href="#border-top-left-radius">border-top-left-radius</a>
|
|
|
|
<td>[ <length> | <percentage> ] [ <length> |
|
|
<percentage> ]?
|
|
|
|
<td>0
|
|
|
|
<td>all elements (but see prose)
|
|
|
|
<td>no
|
|
|
|
<td>Refer to corresponding dimension of the border box.
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-top-style">border-top-style</a>, <a
|
|
class=property href="#border-right-style">border-right-style</a>, <a
|
|
class=property href="#border-bottom-style">border-bottom-style</a>, <a
|
|
class=property href="#border-left-style">border-left-style</a>
|
|
|
|
<td><border-style>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-top-width">border-top-width</a>, <a
|
|
class=property href="#border-right-width">border-right-width</a>, <a
|
|
class=property href="#border-bottom-width">border-bottom-width</a>, <a
|
|
class=property href="#border-left-width">border-left-width</a>
|
|
|
|
<td><border-width>
|
|
|
|
<td>medium
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>width* of containing block
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#border-width">border-width</a>
|
|
|
|
<td><border-width>{1,4}
|
|
|
|
<td>(see individual properties)
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>see individual properties
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#box-decoration-break">box-decoration-break</a>
|
|
|
|
<td>slice | clone
|
|
|
|
<td>slice
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#box-shadow">box-shadow</a>
|
|
|
|
<td>none | <shadow> [ , <shadow> ]*
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li><a href="#ltattachmentgt"><var><attachment></var></a>, <a
|
|
href="#ltattachmentgt"
|
|
title="<attachment>"><strong>3.5.</strong></a>
|
|
|
|
<li>authoring tool, <a href="#authoring-tool" title="authoring
|
|
tool"><strong>8.2.</strong></a>
|
|
|
|
<li>‘<code class=css>auto</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-size"><code
|
|
class=property>background-size</code></a>’ value, <a href="#auto"
|
|
title="''auto'', 'background-size' value"><strong>3.9.</strong></a>
|
|
|
|
<li>‘<a href="#border-image-width"><code
|
|
class=property>border-image-width</code></a>’ value, <a
|
|
href="#auto0" title="''auto'', 'border-image-width'
|
|
value"><strong>6.3.</strong></a>
|
|
</ul>
|
|
|
|
<li>background, <a href="#background"
|
|
title=background><strong>3.10.</strong></a>
|
|
|
|
<li>background-attachment, <a href="#background-attachment"
|
|
title=background-attachment><strong>3.5.</strong></a>
|
|
|
|
<li>background-clip, <a href="#background-clip"
|
|
title=background-clip><strong>3.7.</strong></a>
|
|
|
|
<li>background-color, <a href="#background-color"
|
|
title=background-color><strong>3.2.</strong></a>
|
|
|
|
<li>background-image, <a href="#background-image"
|
|
title=background-image><strong>3.3.</strong></a>
|
|
|
|
<li>background-origin, <a href="#background-origin"
|
|
title=background-origin><strong>3.8.</strong></a>
|
|
|
|
<li>background painting area, <a href="#background-painting-area"
|
|
title="background painting area"><strong>3.7.</strong></a>, <a
|
|
href="#background-painting-area0" title="background painting
|
|
area">3.4.</a>, <a href="#background-painting-area1" title="background
|
|
painting area">3.4.</a>, <a href="#background-painting-area2"
|
|
title="background painting area">3.4.</a>, <a
|
|
href="#background-painting-area3" title="background painting
|
|
area">3.5.</a>, <a href="#background-painting-area4" title="background
|
|
painting area">3.11.</a>
|
|
|
|
<li>background-position, <a href="#background-position"
|
|
title=background-position><strong>3.6.</strong></a>
|
|
|
|
<li>background positioning area, <a href="#background-positioning-area"
|
|
title="background positioning area"><strong>3.8.</strong></a>, <a
|
|
href="#background-positioning-area." title="background positioning
|
|
area.">3.4.</a>, <a href="#background-positioning-area.0"
|
|
title="background positioning area.">3.9.</a>, <a
|
|
href="#background-positioning-area0" title="background positioning
|
|
area">3.4.</a>, <a href="#background-positioning-area1" title="background
|
|
positioning area">3.6.</a>, <a href="#background-positioning-area2"
|
|
title="background positioning area">7.1.</a>
|
|
|
|
<li>background-repeat, <a href="#background-repeat"
|
|
title=background-repeat><strong>3.4.</strong></a>
|
|
|
|
<li>background-size, <a href="#background-size"
|
|
title=background-size><strong>3.9.</strong></a>
|
|
|
|
<li><a href="#ltbg-imagegt"><var><bg-image></var></a>, <a
|
|
href="#ltbg-imagegt" title="<bg-image>"><strong>3.3.</strong></a>
|
|
|
|
<li><a href="#ltbg-layergt"><var><bg-layer></var></a>, <a
|
|
href="#ltbg-layergt" title="<bg-layer>"><strong>3.10.</strong></a>
|
|
|
|
<li><a href="#ltbg-positiongt"><var><bg-position></var></a>, <a
|
|
href="#ltbg-positiongt"
|
|
title="<bg-position>"><strong>3.6.</strong></a>
|
|
|
|
<li><a href="#ltbg-sizegt"><var><bg-size></var></a>, <a
|
|
href="#ltbg-sizegt" title="<bg-size>"><strong>3.9.</strong></a>
|
|
|
|
<li>border, <a href="#border" title=border><strong>4.4.</strong></a>
|
|
|
|
<li>border-bottom, <a href="#border-bottom"
|
|
title=border-bottom><strong>4.4.</strong></a>
|
|
|
|
<li>border-bottom-color, <a href="#border-bottom-color"
|
|
title=border-bottom-color><strong>4.1.</strong></a>
|
|
|
|
<li>border-bottom-left-radius, <a href="#border-bottom-left-radius"
|
|
title=border-bottom-left-radius><strong>5.1.</strong></a>
|
|
|
|
<li>border-bottom-right-radius, <a href="#border-bottom-right-radius"
|
|
title=border-bottom-right-radius><strong>5.1.</strong></a>
|
|
|
|
<li>border-bottom-style, <a href="#border-bottom-style"
|
|
title=border-bottom-style><strong>4.2.</strong></a>
|
|
|
|
<li>border-bottom-width, <a href="#border-bottom-width"
|
|
title=border-bottom-width><strong>4.3.</strong></a>
|
|
|
|
<li>‘<code class=css>border-box</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ value, <a
|
|
href="#border-box" title="''border-box'', 'background-clip'
|
|
value"><strong>3.7.</strong></a>
|
|
|
|
<li>‘<a href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ value, <a
|
|
href="#border-box0" title="''border-box'', 'background-origin'
|
|
value"><strong>3.8.</strong></a>
|
|
</ul>
|
|
|
|
<li>border-color, <a href="#border-color"
|
|
title=border-color><strong>4.1.</strong></a>
|
|
|
|
<li>border-image, <a href="#border-image"
|
|
title=border-image><strong>6.7.</strong></a>
|
|
|
|
<li>border image area, <a href="#border-image-area" title="border image
|
|
area"><strong>6.4.</strong></a>
|
|
|
|
<li>border-image-outset, <a href="#border-image-outset"
|
|
title=border-image-outset><strong>6.4.</strong></a>
|
|
|
|
<li>border-image-repeat, <a href="#border-image-repeat"
|
|
title=border-image-repeat><strong>6.5.</strong></a>
|
|
|
|
<li>border-image-slice, <a href="#border-image-slice"
|
|
title=border-image-slice><strong>6.2.</strong></a>
|
|
|
|
<li>border-image-source, <a href="#border-image-source"
|
|
title=border-image-source><strong>6.1.</strong></a>
|
|
|
|
<li>border-image-width, <a href="#border-image-width"
|
|
title=border-image-width><strong>6.3.</strong></a>
|
|
|
|
<li>border-left, <a href="#border-left"
|
|
title=border-left><strong>4.4.</strong></a>
|
|
|
|
<li>border-left-color, <a href="#border-left-color"
|
|
title=border-left-color><strong>4.1.</strong></a>
|
|
|
|
<li>border-left-style, <a href="#border-left-style"
|
|
title=border-left-style><strong>4.2.</strong></a>
|
|
|
|
<li>border-left-width, <a href="#border-left-width"
|
|
title=border-left-width><strong>4.3.</strong></a>
|
|
|
|
<li>border-radius, <a href="#border-radius"
|
|
title=border-radius><strong>5.1.</strong></a>
|
|
|
|
<li>border-right, <a href="#border-right"
|
|
title=border-right><strong>4.4.</strong></a>
|
|
|
|
<li>border-right-color, <a href="#border-right-color"
|
|
title=border-right-color><strong>4.1.</strong></a>
|
|
|
|
<li>border-right-style, <a href="#border-right-style"
|
|
title=border-right-style><strong>4.2.</strong></a>
|
|
|
|
<li>border-right-width, <a href="#border-right-width"
|
|
title=border-right-width><strong>4.3.</strong></a>
|
|
|
|
<li><a href="#ltborder-stylegt"><var><border-style></var></a>, <a
|
|
href="#ltborder-stylegt"
|
|
title="<border-style>"><strong>4.2.</strong></a>
|
|
|
|
<li>border-style, <a href="#border-style"
|
|
title=border-style><strong>4.2.</strong></a>
|
|
|
|
<li>border-top, <a href="#border-top"
|
|
title=border-top><strong>4.4.</strong></a>
|
|
|
|
<li>border-top-color, <a href="#border-top-color"
|
|
title=border-top-color><strong>4.1.</strong></a>
|
|
|
|
<li>border-top-left-radius, <a href="#border-top-left-radius"
|
|
title=border-top-left-radius><strong>5.1.</strong></a>
|
|
|
|
<li>border-top-right-radius, <a href="#border-top-right-radius"
|
|
title=border-top-right-radius><strong>5.1.</strong></a>
|
|
|
|
<li>border-top-style, <a href="#border-top-style"
|
|
title=border-top-style><strong>4.2.</strong></a>
|
|
|
|
<li>border-top-width, <a href="#border-top-width"
|
|
title=border-top-width><strong>4.3.</strong></a>
|
|
|
|
<li><a href="#ltborder-widthgt"><var><border-width></var></a>, <a
|
|
href="#ltborder-widthgt"
|
|
title="<border-width>"><strong>4.3.</strong></a>
|
|
|
|
<li>border-width, <a href="#border-width"
|
|
title=border-width><strong>4.3.</strong></a>
|
|
|
|
<li>‘<code class=css>bottom</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ value, <a
|
|
href="#bottom" title="''bottom'', 'background-position'
|
|
value"><strong>3.6.</strong></a>
|
|
</ul>
|
|
|
|
<li><a href="#ltboxgt"><var><box></var></a>, <a href="#ltboxgt"
|
|
title="<box>"><strong>3.7.</strong></a>
|
|
|
|
<li>box-decoration-break, <a href="#box-decoration-break"
|
|
title=box-decoration-break><strong>7.1.</strong></a>
|
|
|
|
<li>box-shadow, <a href="#box-shadow"
|
|
title=box-shadow><strong>7.2.</strong></a>
|
|
|
|
<li>‘<code class=css>center</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ value, <a
|
|
href="#center" title="''center'', 'background-position'
|
|
value"><strong>3.6.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>clone</code>’, <a href="#clone"
|
|
title="''clone''"><strong>7.1.</strong></a>
|
|
|
|
<li>color
|
|
<ul>
|
|
<li>background, <a href="#background-color0" title="color,
|
|
background">3.2.</a>
|
|
</ul>
|
|
|
|
<li><a href="#ltcolorgt"><var><color></var></a>, <a
|
|
href="#ltcolorgt" title="<color>"><strong>2.</strong></a>
|
|
|
|
<li>‘<code class=css>contain</code>’, <a href="#contain"
|
|
title="''contain''"><strong>3.9.</strong></a>
|
|
|
|
<li>‘<code class=css>content-box</code>’, <a
|
|
href="#content-box0" title="''content-box''"><strong>3.8.</strong></a>
|
|
<ul>
|
|
<li>‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ value, <a
|
|
href="#content-box" title="''content-box'', 'background-clip'
|
|
value"><strong>3.7.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>cover</code>’, <a href="#cover"
|
|
title="''cover''"><strong>3.9.</strong></a>
|
|
|
|
<li>‘<code class=css>dashed</code>’, <a href="#dashed"
|
|
title="''dashed''"><strong>4.2.</strong></a>
|
|
|
|
<li>document, <a href="#document" title=document><strong>8.1.</strong></a>
|
|
|
|
|
|
<li>documents, <a href="#document"
|
|
title=documents><strong>8.1.</strong></a>
|
|
|
|
<li>‘<code class=css>dotted</code>’, <a href="#dotted"
|
|
title="''dotted''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>double</code>’, <a href="#double"
|
|
title="''double''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>fill</code>’, <a
|
|
href="#border-image-slice-fill"
|
|
title="''fill''"><strong>6.2.</strong></a>
|
|
|
|
<li><a href="#ltfinal-bg-layergt"><var><final-bg-layer></var></a>,
|
|
<a href="#ltfinal-bg-layergt"
|
|
title="<final-bg-layer>"><strong>3.10.</strong></a>
|
|
|
|
<li>fixed, <a href="#fixed0" title=fixed><strong>3.5.</strong></a>
|
|
|
|
<li>‘<a href="#fixed0"><code class=css>fixed</code></a>’, <a
|
|
href="#fixed" title="''fixed''"><strong>3.5.</strong></a>
|
|
|
|
<li>‘<code class=css>groove</code>’, <a href="#groove"
|
|
title="''groove''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>hidden</code>’, <a href="#hidden"
|
|
title="''hidden''"><strong>4.2.</strong></a>
|
|
|
|
<li><a href="#ltimagegt"><var><image></var></a>, <a
|
|
href="#ltimagegt" title="<image>"><strong>2.</strong></a>
|
|
|
|
<li>‘<code class=css>inset</code>’, <a href="#inset"
|
|
title="''inset''"><strong>4.2.</strong></a>
|
|
|
|
<li>layers, <a href="#layers" title=layers>3.1.</a>
|
|
|
|
<li>‘<code class=css>left</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ value, <a
|
|
href="#left" title="''left'', 'background-position'
|
|
value"><strong>3.6.</strong></a>
|
|
</ul>
|
|
|
|
<li>local, <a href="#local0" title=local><strong>3.5.</strong></a>
|
|
|
|
<li>‘<a href="#local0"><code class=css>local</code></a>’, <a
|
|
href="#local" title="''local''"><strong>3.5.</strong></a>
|
|
|
|
<li>‘<code class=css>none</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-image"><code
|
|
class=property>background-image</code></a>’ value, <a
|
|
href="#none" title="''none'', 'background-image'
|
|
value"><strong>3.3.</strong></a>
|
|
|
|
<li>‘<a href="#border-image-source"><code
|
|
class=property>border-image-source</code></a>’ value, <a
|
|
href="#none1" title="''none'', 'border-image-source'
|
|
value"><strong>6.1.</strong></a>
|
|
|
|
<li>‘<a href="#border-style"><code
|
|
class=property>border-style</code></a>’ value, <a href="#none0"
|
|
title="''none'', 'border-style' value"><strong>4.2.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>no-repeat</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ value, <a
|
|
href="#no-repeat" title="''no-repeat'', 'background-repeat'
|
|
value"><strong>3.4.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>outset</code>’, <a href="#outset"
|
|
title="''outset''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>padding-box</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-clip"><code
|
|
class=property>background-clip</code></a>’ value, <a
|
|
href="#padding-box" title="''padding-box'', 'background-clip'
|
|
value"><strong>3.7.</strong></a>
|
|
|
|
<li>‘<a href="#background-origin"><code
|
|
class=property>background-origin</code></a>’ value, <a
|
|
href="#padding-box0" title="''padding-box'', 'background-origin'
|
|
value"><strong>3.8.</strong></a>
|
|
</ul>
|
|
|
|
<li>renderer, <a href="#renderer" title=renderer><strong>8.2.</strong></a>
|
|
|
|
|
|
<li>‘<code class=css>repeat</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ value, <a
|
|
href="#repeat" title="''repeat'', 'background-repeat'
|
|
value"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<a href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’ value, <a
|
|
href="#repeat0" title="''repeat'', 'border-image-repeat'
|
|
value"><strong>6.5.</strong></a>
|
|
</ul>
|
|
|
|
<li><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>, <a
|
|
href="#ltrepeat-stylegt"
|
|
title="<repeat-style>"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<code class=css>repeat-x</code>’, <a href="#repeat-x"
|
|
title="''repeat-x''"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<code class=css>repeat-y</code>’, <a href="#repeat-y"
|
|
title="''repeat-y''"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<code class=css>ridge</code>’, <a href="#ridge"
|
|
title="''ridge''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>right</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ value, <a
|
|
href="#right" title="''right'', 'background-position'
|
|
value"><strong>3.6.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>round</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ value, <a
|
|
href="#round" title="''round'', 'background-repeat'
|
|
value"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<a href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’ value, <a
|
|
href="#round0" title="''round'', 'border-image-repeat'
|
|
value"><strong>6.5.</strong></a>
|
|
</ul>
|
|
|
|
<li>scroll, <a href="#scroll0" title=scroll><strong>3.5.</strong></a>
|
|
|
|
<li>‘<a href="#scroll0"><code class=css>scroll</code></a>’, <a
|
|
href="#scroll" title="''scroll''"><strong>3.5.</strong></a>
|
|
|
|
<li><a href="#ltshadowgt"><var><shadow></var></a>, <a
|
|
href="#ltshadowgt" title="<shadow>"><strong>7.2.</strong></a>
|
|
|
|
<li>‘<code class=css>slice</code>’, <a href="#slice"
|
|
title="''slice''"><strong>7.1.</strong></a>
|
|
|
|
<li>‘<code class=css>solid</code>’, <a href="#solid"
|
|
title="''solid''"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>space</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-repeat"><code
|
|
class=property>background-repeat</code></a>’ value, <a
|
|
href="#space" title="''space'', 'background-repeat'
|
|
value"><strong>3.4.</strong></a>
|
|
|
|
<li>‘<a href="#border-image-repeat"><code
|
|
class=property>border-image-repeat</code></a>’ value, <a
|
|
href="#space0" title="''space'', 'border-image-repeat'
|
|
value"><strong>6.5.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>stretch</code>’, <a href="#stretch"
|
|
title="''stretch''"><strong>6.5.</strong></a>
|
|
|
|
<li>style sheet, <a href="#style-sheet" title="style
|
|
sheet"><strong>8.1.</strong></a>
|
|
<ul>
|
|
<li>as conformance class, <a href="#style-sheet0" title="style sheet, as
|
|
conformance class"><strong>8.2.</strong></a>
|
|
</ul>
|
|
|
|
<li>‘<code class=css>top</code>’
|
|
<ul>
|
|
<li>‘<a href="#background-position"><code
|
|
class=property>background-position</code></a>’ value, <a
|
|
href="#top" title="''top'', 'background-position'
|
|
value"><strong>3.6.</strong></a>
|
|
</ul>
|
|
|
|
<li>UA, <a href="#ua" title=UA><strong>8.1.</strong></a>
|
|
|
|
<li>User Agent, <a href="#user-agent" title="User
|
|
Agent"><strong>8.1.</strong></a>
|
|
|
|
<li>viewport, <a href="#viewport" title=viewport>3.5.</a>
|
|
</ul>
|
|
<!--end-index-->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
End:
|
|
-->
|