callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d4022898c0
gtk3/docs/reference/gtk/html/chap-css-properties.html
Jeremy Bicha d4022898c0 New upstream version 3.22.26
2017-12-21 20:47:04 -05:00

1691 lines
59 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GTK+ CSS: GTK+ 3 Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
<link rel="up" href="theming.html" title="Part IV. Theming in GTK+">
<link rel="prev" href="chap-css-overview.html" title="GTK+ CSS">
<link rel="next" href="GtkStyleContext.html" title="GtkStyleContext">
<meta name="generator" content="GTK-Doc V1.25.1 (XML mode)">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
<td width="100%" align="left" class="shortcuts"></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
<td><a accesskey="u" href="theming.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
<td><a accesskey="p" href="chap-css-overview.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="GtkStyleContext.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
</tr></table>
<div class="refentry">
<a name="chap-css-properties"></a><div class="titlepage"></div>
<div class="refnamediv"><table width="100%"><tr>
<td valign="top">
<h2><span class="refentrytitle">GTK+ CSS</span></h2>
<p>GTK+ CSS —
GTK+ CSS Properties
</p>
</td>
<td class="gallery_image" valign="top" align="right"></td>
</tr></table></div>
<div class="refsect1">
<a name="css-properties"></a><h2>Supported CSS Properties</h2>
<p>
GTK+ supports CSS properties and shorthands as far as they can be applied
in the context of widgets, and adds its own properties only when needed.
All GTK+-specific properties have a -gtk prefix.
</p>
<p>
All properties support the following keywords: inherit, initial, unset, with
the same meaning as in <a class="ulink" href="https://www.w3.org/TR/css3-cascade/#defaulting-keywords" target="_top">CSS</a>.
</p>
<p>
The following basic datatypes are used throughout:
</p>
<div class="literallayout"><p><code class="code">〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉</code><br>
<code class="code">〈percentage〉 = 〈number〉 % | 〈calc expression〉</code><br>
<code class="code">〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉</code><br>
<code class="code">〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉</code><br>
</p></div>
<p>
Length values with the em or ex units are resolved using the font
size value, unless they occur in setting the font-size itself, in
which case they are resolved using the inherited font size value.
</p>
<p>
The rem unit is resolved using the initial font size value, which is
not quite the same as the CSS definition of rem.
</p>
<p>
Whereever a number is allowed, GTK+ also accepts a Windows-specific
theme size:
</p>
<div class="literallayout"><p><br>
<code class="code">〈win32 theme size〉 = 〈win32 size〉| 〈win32 part size〉</code><br>
<code class="code">〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )</code><br>
<code class="code">〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |</code><br>
<code class="code">                         -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code><br>
<code class="code">                         -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code><br>
</p></div>
<div class="literallayout"><p><code class="code">〈calc expression〉 = calc( 〈calc sum〉 )</code><br>
<code class="code">〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]*</code><br>
<code class="code">〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]*</code><br>
<code class="code">〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 )</code><br>
</p></div>
<p>
The calc() notation adds considerable expressive power. There are limits
on what types can be combined in such an expression (e.g. it does not make
sense to add a number and a time). For the full details, see the
<a class="ulink" href="https://www.w3.org/TR/css3-values/#calc-notation" target="_top">CSS3 Values and
Units</a> spec.
</p>
<p>
A common pattern among shorthand properties (called 'four sides') is one
where one to four values can be specified, to determine a value for each
side of an area. In this case, the specified values are interpreted as
follows:
</p>
<div class="variablelist"><table border="0" class="variablelist">
<colgroup>
<col align="left" valign="top">
<col>
</colgroup>
<tbody>
<tr>
<td><p><span class="term">4 values: </span></p></td>
<td>top right bottom left</td>
</tr>
<tr>
<td><p><span class="term">3 values: </span></p></td>
<td>top horizontal bottom</td>
</tr>
<tr>
<td><p><span class="term">2 values: </span></p></td>
<td>vertical horizontal</td>
</tr>
<tr>
<td><p><span class="term">1 value: </span></p></td>
<td>all</td>
</tr>
</tbody>
</table></div>
<p>
</p>
<div class="table">
<a name="id-1.5.3.3.13"></a><p class="title"><b>Table 2. Color Properties</b></p>
<div class="table-contents"><table class="table" summary="Color Properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">rgba(1,1,1,1)</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-color/#foreground" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>opacity</td>
<td><code class="code">〈alpha value〉</code></td>
<td><code class="code">1</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-color/#opacity" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break"><p>
The color property specifies the color to use for text, icons and other
foreground rendering. The opacity property specifies the opacity that is
used to composite the widget onto its parent widget.
</p>
<div class="table">
<a name="id-1.5.3.3.15"></a><p class="title"><b>Table 3. Font Properties</b></p>
<div class="table-contents">
<table class="table" summary="Font Properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>font‑family</td>
<td><code class="code">〈family name〉 [ , 〈family name〉 ]*</code></td>
<td>gtk-font-name setting</td>
<td align="center">✓</td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-family-prop" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>font‑size</td>
<td><code class="code">〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</code></td>
<td>gtk-font-name setting</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-size-props" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-size-prop" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>font‑style</td>
<td><code class="code">normal | oblique | italic</code></td>
<td><code class="code">normal</code></td>
<td align="center">✓</td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-style-prop" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>font‑variant</td>
<td><code class="code">normal | small-caps</code></td>
<td><code class="code">normal</code></td>
<td align="center">✓</td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#descdef-font-variant" target="_top">CSS3</a>
</td>
<td>only CSS2 values supported</td>
</tr>
<tr>
<td>font‑weight</td>
<td><code class="code">normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></td>
<td><code class="code">normal</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-weight-prop" target="_top">CSS3</a>
</td>
<td>normal is synonymous with 400, bold with 700</td>
</tr>
<tr>
<td>font‑stretch</td>
<td><code class="code">ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</code></td>
<td><code class="code">normal</code></td>
<td align="center">✓</td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-stretch-prop" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑dpi</td>
<td><code class="code">〈number〉</code></td>
<td>screen resolution</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Font Properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td>font</td>
<td><code class="code">[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-fonts/#font-prop" target="_top">CSS3</a>
</td>
<td>CSS allows line-height, etc</td>
</tr></tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large</code><br>
<code class="code">〈relative size〉 = larger | smaller</code><br>
</p></div>
<p>
The font properties determine the font to use for rendering text. Relative
font sizes and weights are resolved relative to the inherited value for
these properties.
</p>
<div class="table">
<a name="id-1.5.3.3.18"></a><p class="title"><b>Table 4. Text caret properties</b></p>
<div class="table-contents"><table class="table" summary="Text caret properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>caret-color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-ui/#caret-color" target="_top">CSS3</a></td>
<td>CSS allows an auto value</td>
</tr>
<tr>
<td>-gtk-secondary-caret-color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td> </td>
<td>Used for the secondary caret in bidirectional text</td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break"><p>
The caret properties provide a way to change the appearance of the insertion
caret in editable text.
</p>
<div class="table">
<a name="id-1.5.3.3.20"></a><p class="title"><b>Table 5. Text decoration properties</b></p>
<div class="table-contents">
<table class="table" summary="Text decoration properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>letter‑spacing</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-text/#letter-spacing" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>text‑decoration‑line</td>
<td><code class="code">none | underline | line-through</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property" target="_top">CSS3</a>
</td>
<td>CSS allows overline</td>
</tr>
<tr>
<td>text‑decoration‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>text‑decoration‑style</td>
<td><code class="code">solid | double | wavy</code></td>
<td><code class="code">solid</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property" target="_top">CSS3</a></td>
<td>CSS allows dashed and dotted</td>
</tr>
<tr>
<td>text‑shadow</td>
<td><code class="code">none | 〈shadow〉</code></td>
<td><code class="code">none</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Text decoration properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td>text‑decoration</td>
<td><code class="code">〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property" target="_top">CSS3</a></td>
<td> </td>
</tr></tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈shadow〉 = 〈length〉 〈length〉 〈color〉?</code><br>
</p></div>
<p>
The text decoration properties determine whether to apply extra decorations
when rendering text.
</p>
<div class="table">
<a name="id-1.5.3.3.23"></a><p class="title"><b>Table 6. Icon Properties</b></p>
<div class="table-contents"><table class="table" summary="Icon Properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>‑gtk‑icon‑source</td>
<td><code class="code">builtin | 〈image〉 | none</code></td>
<td><code class="code">builtin</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑icon‑transform</td>
<td><code class="code">none | 〈transform〉+</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑icon‑style</td>
<td><code class="code">requested | regular | symbolic</code></td>
<td><code class="code">requested</code></td>
<td align="center">✓</td>
<td align="center"> </td>
<td> </td>
<td>Determines the preferred style for application-loaded icons</td>
</tr>
<tr>
<td>‑gtk‑icon‑theme</td>
<td><code class="code">〈name〉</code></td>
<td>current icon theme</td>
<td align="center">✓</td>
<td align="center"> </td>
<td> </td>
<td>The icon theme to use with -gtk-icontheme(). Since 3.20</td>
</tr>
<tr>
<td>‑gtk‑icon‑palette</td>
<td><code class="code">〈color palette〉</code></td>
<td><code class="code">default</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td> </td>
<td>Used to recolor symbolic icons (both application-loaded and from -gtk-icontheme()). Since 3.20</td>
</tr>
<tr>
<td>‑gtk‑icon‑shadow</td>
<td><code class="code">none | 〈shadow〉</code></td>
<td><code class="code">none</code></td>
<td align="center">✓</td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑icon‑effect</td>
<td><code class="code">none | highlight | dim</code></td>
<td><code class="code">none</code></td>
<td align="center">✓</td>
<td align="center"> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |</code><br>
<code class="code">                scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code><br>
<code class="code">                skewX( 〈angle〉 ) |  skewY( 〈angle〉 )</code><br>
<code class="code">〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code><br>
</p></div>
<p>
The -gtk-icon-source property is used by widgets that are rendering 'built-in'
icons, such as arrows, expanders, spinners, checks or radios.
</p>
<p>
The -gtk-icon-style property determines the preferred style for
application-provided icons.
</p>
<p>
The -gtk-icon-transform and -gtk-icon-shadow properties affect the rendering
of both built-in and application-provided icons.
</p>
<p>
-gtk-icon-palette defines a color palette for recoloring symbolic
icons. The recognized names for colors in symbolic icons are error,
warning and success. The default palette maps these three names to
symbolic colors with the names @error_color, @warning_color and
@success_color respectively.
</p>
<div class="table">
<a name="id-1.5.3.3.29"></a><p class="title"><b>Table 7. Box properties</b></p>
<div class="table-contents">
<table class="table" summary="Box properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>min‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#min-width" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
<tr>
<td>min‑height</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#min-height" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
<tr>
<td>margin‑top</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#margin-top" target="_top">CSS3</a>
</td>
<td>CSS allows percentages or auto</td>
</tr>
<tr>
<td>margin‑right</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#margin-right" target="_top">CSS3</a>
</td>
<td>CSS allows percentages or auto</td>
</tr>
<tr>
<td>margin‑bottom</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#margin-bottom" target="_top">CSS3</a>
</td>
<td>CSS allows percentages or auto</td>
</tr>
<tr>
<td>margin‑left</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#margin-left" target="_top">CSS3</a>
</td>
<td>CSS allows percentages or auto</td>
</tr>
<tr>
<td>padding‑top</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#padding-top" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
<tr>
<td>padding‑right</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#padding-right" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
<tr>
<td>padding‑bottom</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#padding-bottom" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
<tr>
<td>padding‑left</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#padding-left" target="_top">CSS3</a>
</td>
<td>CSS allows percentages</td>
</tr>
</tbody>
</table>
<table class="table" summary="Box properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>margin</td>
<td><code class="code">〈length〉{1,4}</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#margin" target="_top">CSS3</a>
</td>
<td>a 'four sides' shorthand</td>
</tr>
<tr>
<td>padding</td>
<td><code class="code">〈length〉{1,4}</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-box/#padding" target="_top">CSS3</a>
</td>
<td>a 'four sides' shorthand</td>
</tr>
</tbody>
</table>
</div>
</div>
<br class="table-break"><div class="table">
<a name="id-1.5.3.3.30"></a><p class="title"><b>Table 8. Border properties</b></p>
<div class="table-contents">
<table class="table" summary="Border properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>border‑top‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-width" target="_top">CSS3</a>
</td>
<td>CSS allows other values</td>
</tr>
<tr>
<td>border‑right‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/css3-background/#the-border-width" target="_top">CSS3</a>
</td>
<td>CSS allows other values</td>
</tr>
<tr>
<td>border‑bottom‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-width" target="_top">CSS3</a>
</td>
<td>CSS allows other values</td>
</tr>
<tr>
<td>border‑right‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-width" target="_top">CSS3</a>
</td>
<td>CSS allows other values</td>
</tr>
<tr>
<td>border‑top‑style</td>
<td><code class="code">〈border style〉</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-style" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑right‑style</td>
<td><code class="code">〈border style〉</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-style" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑bottom‑style</td>
<td><code class="code">〈border style〉</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-style" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑left‑style</td>
<td><code class="code">〈border style〉</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-style" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑top‑right‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-radius" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑bottom‑right‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-radius" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑bottom‑left‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-radius" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑top‑left‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-radius" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑top‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑right‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑bottom‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑left‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑image‑source</td>
<td><code class="code">〈image〉 | none</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-image-source" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>border‑image‑repeat</td>
<td><code class="code">〈border repeat〉{1,2}</code></td>
<td><code class="code">stretch</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR//css3-background/#the-border-image-repeat" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>border‑image‑slice</td>
<td><code class="code">[ 〈number〉 | 〈percentage〉 ]{1,4} &amp;&amp; fill?</code></td>
<td><code class="code">100%</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR//css3-background/#the-border-image-slice" target="_top">CSS3</a></td>
<td>a 'four sides' shorthand</td>
</tr>
<tr>
<td>border‑image‑width</td>
<td><code class="code">[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</code></td>
<td><code class="code">1</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR//css3-background/#the-border-image-width" target="_top">CSS3</a></td>
<td>a 'four sides' shorthand</td>
</tr>
</tbody>
</table>
<table class="table" summary="Border properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>border‑width</td>
<td><code class="code">〈length〉{1,4}</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-width" target="_top">CSS3</a>
</td>
<td>a 'four sides' shorthand</td>
</tr>
<tr>
<td>border‑style</td>
<td><code class="code">〈border style〉{1,4}</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#the-border-style" target="_top">CSS3</a>
</td>
<td>a 'four sides' shorthand</td>
</tr>
<tr>
<td>border‑color</td>
<td><code class="code">〈color〉{1,4}</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#border-color" target="_top">CSS3</a></td>
<td>a 'four sides' shorthand</td>
</tr>
<tr>
<td>border‑top</td>
<td><code class="code">〈length〉 || 〈border style〉 || 〈color〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#border-top" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑left</td>
<td><code class="code">〈length〉 || 〈border style〉 || 〈color〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#border-left" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑bottom</td>
<td><code class="code">〈length〉 || 〈border style〉 || 〈color〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#border-bottom" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑right</td>
<td><code class="code">〈length〉 || 〈border style〉 || 〈color〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#border-right" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border</td>
<td><code class="code">〈length〉 || 〈border style〉 || 〈color〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#border" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>border‑radius</td>
<td><code class="code">[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage&gt; ]{1,4} ]?</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#border-radius" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>border‑image</td>
<td><code class="code">〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#border-image" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code><br>
<code class="code">〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}</code><br>
</p></div>
<div class="table">
<a name="id-1.5.3.3.32"></a><p class="title"><b>Table 9. Outline properties</b></p>
<div class="table-contents">
<table class="table" summary="Outline properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>outline‑style</td>
<td><code class="code">none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-ui/#outline-style" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>outline‑width</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-ui/#outline-width" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>outline‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">currentColor</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-ui/#outline-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>outline‑offset</td>
<td><code class="code">〈length〉</code></td>
<td><code class="code">0px</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-ui/#outline-offset" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑outline‑top‑left‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑outline‑top‑right‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑outline‑bottom‑right‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑outline‑bottom‑left‑radius</td>
<td><code class="code">〈corner radius〉</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Outline properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>outline</td>
<td><code class="code">〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-ui/#propdef-outline" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>‑gtk‑outline‑radius</td>
<td><code class="code">[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage&gt; ]{1,4} ]?</code></td>
<td>see individual properties</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br class="table-break"><p>
GTK+ uses the CSS outline properties to render the 'focus rectangle'.
</p>
<div class="table">
<a name="id-1.5.3.3.34"></a><p class="title"><b>Table 10. Background properties</b></p>
<div class="table-contents">
<table class="table" summary="Background properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>background‑color</td>
<td><code class="code">〈color〉</code></td>
<td><code class="code">rgba(0,0,0,0)</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#background-color" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>background‑clip</td>
<td><code class="code">〈box〉 [ , 〈box〉 ]*</code></td>
<td><code class="code">border-box</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#background-clip" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>background‑origin</td>
<td><code class="code">〈box〉 [ , 〈box〉 ]*</code></td>
<td><code class="code">padding-box</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#background-origin" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>background‑size</td>
<td><code class="code">〈bg-size〉 [ , 〈bg-size〉 ]*</code></td>
<td><code class="code">auto</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#background-size" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>background‑position</td>
<td><code class="code">〈position〉 [ , 〈position〉 ]*</code></td>
<td><code class="code">0</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#background-position" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>background‑repeat</td>
<td><code class="code">〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</code></td>
<td><code class="code">repeat</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#background-repeat" target="_top">CSS3</a>
</td>
<td> </td>
</tr>
<tr>
<td>background‑image</td>
<td><code class="code">〈bg-image〉[ , 〈bg-image〉 ]*</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#background-image" target="_top">CSS3</a>
</td>
<td>not supported: urls without quotes, CSS radial gradients, colors in crossfades</td>
</tr>
<tr>
<td>background-blend-mode</td>
<td><code class="code">〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></td>
<td><code class="code">normal</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td> </td>
<td>only affects multiple backgrounds</td>
</tr>
<tr>
<td>box‑shadow</td>
<td><code class="code">none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center">✓</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-background/#box-shadow" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Background properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td><p>background</p></td>
<td><code class="code">[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</code></td>
<td>see individual properties</td>
<td>
<a class="ulink" href="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background" target="_top">CSS2</a>,
<a class="ulink" href="https://www.w3.org/TR/css3-background/#background" target="_top">CSS3</a>
</td>
<td> </td>
</tr></tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈box〉 = border-box | padding-box | content-box</code><br>
<code class="code">〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain</code><br>
<code class="code">〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}</code><br>
<code class="code">〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code><br>
<code class="code">〈bg-image〉 = 〈image〉 | none</code><br>
<code class="code">〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code><br>
<code class="code">〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉</code><br>
<code class="code">〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || hard-light || hue || lighten || luminosity || multiply || normal || overlay || saturate || screen || soft-light</code><br>
<code class="code">〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?</code><br>
</p></div>
<p>
As in CSS, the background color is rendered underneath all the background image layers, so it will only be visible if
background images are absent or have transparency.
</p>
<p>
Alternatively, multiple backgrounds can be blended using the <code class="code">background-blend-mode</code> property.
</p>
<div class="table">
<a name="id-1.5.3.3.38"></a><p class="title"><b>Table 11. Transition properties</b></p>
<div class="table-contents">
<table class="table" summary="Transition properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>transition‑property</td>
<td><code class="code">none | all | 〈property name〉 [ , 〈property name〉 ]*</code></td>
<td><code class="code">all</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-transitions/#transition-property" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>transition‑duration</td>
<td><code class="code">〈time〉 [ , 〈time〉 ]*</code></td>
<td><code class="code">0s</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-transitions/#transition-duration" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>transition‑timing‑function</td>
<td><code class="code">〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]*</code></td>
<td><code class="code">ease</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-transitions/#transition-timing-function" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>transition‑delay</td>
<td><code class="code">〈time〉 [ , 〈time〉 ]*</code></td>
<td><code class="code">0s</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-transitions/#transition-delay" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Transition properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td>transition</td>
<td><code class="code">〈single-transition〉 [ , 〈single-transition〉 ]*</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-transitions/#transition" target="_top">CSS3</a></td>
<td> </td>
</tr></tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code><br>
<code class="code">                             step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code><br>
<code class="code">                             cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code><br>
<code class="code">〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code><br>
</p></div>
<div class="table">
<a name="id-1.5.3.3.40"></a><p class="title"><b>Table 12. Animation properties</b></p>
<div class="table-contents">
<table class="table" summary="Animation properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody>
<tr>
<td>animation‑name</td>
<td><code class="code">〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-name" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑duration</td>
<td><code class="code">〈time〉 [ , 〈time〉 ]*</code></td>
<td><code class="code">0s</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-duration" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑timing‑function</td>
<td><code class="code">〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]*</code></td>
<td><code class="code">ease</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-timing-function" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑iteration-count</td>
<td><code class="code">〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]*</code></td>
<td><code class="code">1</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-iteration-count" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑direction</td>
<td><code class="code">〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]*</code></td>
<td><code class="code">normal</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-direction" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑play‑state</td>
<td><code class="code">〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]*</code></td>
<td><code class="code">running</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-play-state" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑delay</td>
<td><code class="code">〈time〉 [ , 〈time〉 ]*</code></td>
<td><code class="code">0s</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-delay" target="_top">CSS3</a></td>
<td> </td>
</tr>
<tr>
<td>animation‑fill‑mode</td>
<td><code class="code">〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]*</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation-fill-mode" target="_top">CSS3</a></td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table" summary="Animation properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead><tr>
<th>Shorthand</th>
<th>Value</th>
<th>Initial</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td>animation</td>
<td><code class="code">〈single‑animation〉 [ , 〈single‑animation〉]*</code></td>
<td>see individual properties</td>
<td><a class="ulink" href="https://www.w3.org/TR/css3-animations/#animation" target="_top">CSS3</a></td>
<td> </td>
</tr></tbody>
</table>
</div>
</div>
<br class="table-break"><div class="literallayout"><p><code class="code">〈single-animation-name〉 = none | 〈property name〉</code><br>
<code class="code">〈single-animation-iteration-count〉 = infinite | 〈number〉</code><br>
<code class="code">〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse</code><br>
<code class="code">〈single-animation-play-state〉 = running | paused</code><br>
<code class="code">〈single-animation-fill-mode〉 = none | forwards | backwards | both</code><br>
<code class="code">〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code><br>
<code class="code">                       〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code><br>
</p></div>
<div class="table">
<a name="id-1.5.3.3.42"></a><p class="title"><b>Table 13. Key binding properties</b></p>
<div class="table-contents"><table class="table" summary="Key binding properties" width="100%" border="1">
<colgroup>
<col>
<col>
<col>
<col align="center">
<col align="center">
<col>
<col>
</colgroup>
<thead><tr>
<th>Name</th>
<th>Value</th>
<th>Initial</th>
<th align="center">Inh.</th>
<th align="center">Ani.</th>
<th>Reference</th>
<th>Notes</th>
</tr></thead>
<tbody><tr>
<td>‑gtk‑key‑bindings</td>
<td><code class="code">none | 〈binding name〉 [ , 〈binding name〉 ]*</code></td>
<td><code class="code">none</code></td>
<td align="center"> </td>
<td align="center"> </td>
<td> </td>
<td> </td>
</tr></tbody>
</table></div>
</div>
<br class="table-break"><p>
〈binding name〉 must have been assigned to a binding set with a @binding-set rule.
</p>
</div>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.25.1</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink