gtk2/docs/reference/gtk/css-properties.xml
2020-02-26 21:51:31 +01:00

1381 lines
66 KiB
XML

<?xml version="1.0"?>
<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
"http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
]>
<refentry id="chap-css-properties">
<refmeta>
<refentrytitle>GTK+ CSS Properties</refentrytitle>
<manvolnum>3</manvolnum>
<refmiscinfo>GTK Library</refmiscinfo>
</refmeta>
<refnamediv>
<refname>GTK+ CSS Properties</refname>
<refpurpose>
CSS Properties in GTK+
</refpurpose>
</refnamediv>
<!--
Formatting conventions:
We use
〈 U+2329 Left-pointing Angle Bracket
〉 U+232A Right-pointing Angle Bracket
for indicating non-terminals in syntax productions.
We use <literallayout> for syntax productions, and each line is put in a <code>
(the latter is a workaround for deficiences in the developer.gnome.org post-processing).
-->
<refsect1 id="css-properties">
<title>Supported CSS Properties</title>
<para>
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.
</para>
<para>
All properties support the following keywords: inherit, initial, unset, with
the same meaning as in <ulink url="https://www.w3.org/TR/css3-cascade/#defaulting-keywords">CSS</ulink>.
</para>
<para>
The following basic datatypes are used throughout:
</para>
<literallayout><code>〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉</code>
<code>〈percentage〉 = 〈number〉 % | 〈calc expression〉</code>
<code>〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉</code>
<code>〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉</code>
</literallayout>
<para>
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.
</para>
<para>
The rem unit is resolved using the initial font size value, which is
not quite the same as the CSS definition of rem.
</para>
<para>
Whereever a number is allowed, GTK+ also accepts a Windows-specific
theme size:
</para>
<literallayout>
<code>〈win32 theme size〉 = 〈win32 size〉 | 〈win32 part size〉</code>
<code>〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )</code>
<code>〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |</code>
<code> -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code>
<code> -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ]</code>
<code> ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code>
</literallayout>
<literallayout><code>〈calc expression〉 = calc( 〈calc sum〉 )</code>
<code>〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]*</code>
<code>〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]*</code>
<code>〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 )</code>
</literallayout>
<para>
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
<ulink url="https://www.w3.org/TR/css3-values/#calc-notation">CSS3 Values and
Units</ulink> spec.
</para>
<para>
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:
<variablelist>
<varlistentry>
<term>4 values: </term><listitem>top right bottom left</listitem>
</varlistentry>
<varlistentry>
<term>3 values: </term><listitem>top horizontal bottom</listitem>
</varlistentry>
<varlistentry>
<term>2 values: </term><listitem>vertical horizontal</listitem>
</varlistentry>
<varlistentry>
<term>1 value: </term><listitem>all</listitem>
</varlistentry>
</variablelist>
</para>
<table pgwide="1">
<title>Color Properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>rgba(1,1,1,1)</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-color/#foreground">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">opacity</phrase></entry>
<entry><code>〈alpha value〉</code></entry>
<entry><code>1</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-color/#opacity">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<para>
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.
</para>
<table pgwide="1">
<title>Font Properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">font-family</phrase></entry>
<entry><code>〈family name〉 [ , 〈family name〉 ]*</code></entry>
<entry>gtk-font-name setting</entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-family-prop">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">font-size</phrase></entry>
<entry><code>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</code></entry>
<entry>gtk-font-name setting</entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-size-props">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-size-prop">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">font-style</phrase></entry>
<entry><code>normal | oblique | italic</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-style-prop">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">font-variant</phrase></entry>
<entry><code>normal | small-caps</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#descdef-font-variant">CSS3</ulink></entry>
<entry>only CSS2 values supported</entry>
</row>
<row>
<entry><phrase role="nowrap">font-weight</phrase></entry>
<entry><code>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-weight-prop">CSS3</ulink></entry>
<entry>normal is synonymous with 400, bold with 700</entry>
</row>
<row>
<entry><phrase role="nowrap">font-stretch</phrase></entry>
<entry><code>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-dpi</phrase></entry>
<entry><code>〈number〉</code></entry>
<entry>screen resolution</entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">font-feature-settings</phrase></entry>
<entry><code>〈feature-tag-value〉&num; </code></entry>
<entry>""</entry>
<entry></entry>
<entry>></entry>
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-feature-settings-prop">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">font</phrase></entry>
<entry><code>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-prop">CSS3</ulink></entry>
<entry>CSS allows line-height, etc</entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large</code>
<code>〈relative size〉 = larger | smaller</code>
</literallayout>
<para>
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.
</para>
<table pgwide="1">
<title>Text caret properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">caret-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS3</ulink></entry>
<entry>CSS allows an auto value</entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-secondary-caret-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>Used for the secondary caret in bidirectional text</entry>
</row>
</tbody>
</tgroup>
</table>
<para>
The caret properties provide a way to change the appearance of the insertion
caret in editable text.
</para>
<table pgwide="1">
<title>Text decoration properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">letter-spacing</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-text/#letter-spacing">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">text-decoration-line</phrase></entry>
<entry><code>none | underline | line-through</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">CSS3</ulink></entry>
<entry>CSS allows overline</entry>
</row>
<row>
<entry><phrase role="nowrap">text-decoration-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">text-decoration-style</phrase></entry>
<entry><code>solid | double | wavy</code></entry>
<entry><code>solid</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS3</ulink></entry>
<entry>CSS allows dashed and dotted</entry>
</row>
<row>
<entry><phrase role="nowrap">text-shadow</phrase></entry>
<entry><code>none | 〈shadow〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">text-decoration</phrase></entry>
<entry><code>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈shadow〉 = 〈length〉 〈length〉 〈color〉?</code>
</literallayout>
<para>
The text decoration properties determine whether to apply extra decorations
when rendering text.
</para>
<table pgwide="1">
<title>Icon Properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">-gtk-icon-source</phrase></entry>
<entry><code>builtin | 〈image〉 | none</code></entry>
<entry><code>builtin</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-transform</phrase></entry>
<entry><code>none | 〈transform〉+</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-style</phrase></entry>
<entry><code>requested | regular | symbolic</code></entry>
<entry><code>requested</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>Determines the preferred style for application-loaded icons</entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-theme</phrase></entry>
<entry><code>〈name〉</code></entry>
<entry>current icon theme</entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>The icon theme to use with -gtk-icontheme(). Since 3.20</entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-palette</phrase></entry>
<entry><code>〈color palette〉</code></entry>
<entry><code>default</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>Used to recolor symbolic icons (both application-loaded and from -gtk-icontheme()). Since 3.20</entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-shadow</phrase></entry>
<entry><code>none | 〈shadow〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-icon-effect</phrase></entry>
<entry><code>none | highlight | dim</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |</code>
<code> scale( 〈number〉 [ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code>
<code> skewX( 〈angle〉 ) | skewY( 〈angle〉 )</code>
<code>〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code>
</literallayout>
<para>
The -gtk-icon-source property is used by widgets that are rendering 'built-in'
icons, such as arrows, expanders, spinners, checks or radios.
</para>
<para>
The -gtk-icon-style property determines the preferred style for
application-provided icons.
</para>
<para>
The -gtk-icon-transform and -gtk-icon-shadow properties affect the rendering
of both built-in and application-provided icons.
</para>
<para>
-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.
</para>
<table pgwide="1">
<title>Box properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">min-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#min-width">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry><phrase role="nowrap">min-height</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#min-height">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry><phrase role="nowrap">margin-top</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#margin-top">CSS3</ulink></entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry><phrase role="nowrap">margin-right</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#margin-right">CSS3</ulink></entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry><phrase role="nowrap">margin-bottom</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#margin-bottom">CSS3</ulink></entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry><phrase role="nowrap">margin-left</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#margin-left">CSS3</ulink></entry>
<entry>CSS allows percentages or auto</entry>
</row>
<row>
<entry><phrase role="nowrap">padding-top</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#padding-top">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry><phrase role="nowrap">padding-right</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#padding-right">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry><phrase role="nowrap">padding-bottom</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#padding-bottom">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
<row>
<entry><phrase role="nowrap">padding-left</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#padding-left">CSS3</ulink></entry>
<entry>CSS allows percentages</entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">margin</phrase></entry>
<entry><code>〈length〉{1,4}</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#margin">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
<row>
<entry><phrase role="nowrap">padding</phrase></entry>
<entry><code>〈length〉{1,4}</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-box/#padding">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
</tbody>
</tgroup>
</table>
<table pgwide="1">
<title>Border properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">border-top-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry><phrase role="nowrap">border-right-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
<ulink url="https://www.w3.org/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry><phrase role="nowrap">border-left-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry><phrase role="nowrap">border-top-style</phrase></entry>
<entry><code>〈border style〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-right-style</phrase></entry>
<entry><code>〈border style〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom-style</phrase></entry>
<entry><code>〈border style〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-left-style</phrase></entry>
<entry><code>〈border style〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-top-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-top-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-top-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-right-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-left-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-image-source</phrase></entry>
<entry><code>〈image〉 | none</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#the-border-image-source">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-image-repeat</phrase></entry>
<entry><code>〈border repeat〉{1,2}</code></entry>
<entry><code>stretch</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-repeat">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-image-slice</phrase></entry>
<entry><code>[ 〈number〉 | 〈percentage〉 ]{1,4} &amp;&amp; fill?</code></entry>
<entry><code>100%</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-slice">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
<row>
<entry><phrase role="nowrap">border-image-width</phrase></entry>
<entry><code>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</code></entry>
<entry><code>1</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-width">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">border-width</phrase></entry>
<entry><code>〈length〉{1,4}</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
<row>
<entry><phrase role="nowrap">border-style</phrase></entry>
<entry><code>〈border style〉{1,4}</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
<row>
<entry><phrase role="nowrap">border-color</phrase></entry>
<entry><code>〈color〉{1,4}</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-color">CSS3</ulink></entry>
<entry>a 'four sides' shorthand</entry>
</row>
<row>
<entry><phrase role="nowrap">border-top</phrase></entry>
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#border-top">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-right</phrase></entry>
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#border-right">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-bottom</phrase></entry>
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#border-bottom">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-left</phrase></entry>
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#border-left">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border</phrase></entry>
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#border">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-radius</phrase></entry>
<entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-radius">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">border-image</phrase></entry>
<entry><code>〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-image">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code>
<code>〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}</code>
</literallayout>
<table pgwide="1">
<title>Outline properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">outline-style</phrase></entry>
<entry><code>none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-ui/#outline-style">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">outline-width</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-ui/#outline-width">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">outline-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-ui/#outline-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">outline-offset</phrase></entry>
<entry><code>〈length〉</code></entry>
<entry><code>0px</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-top-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-top-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-bottom-right-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-bottom-left-radius</phrase></entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">outline</phrase></entry>
<entry><code>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">-gtk-outline-radius</phrase></entry>
<entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
<entry>see individual properties</entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<para>
GTK+ uses the CSS outline properties to render the 'focus rectangle'.
</para>
<table pgwide="1">
<title>Background properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">background-color</phrase></entry>
<entry><code>〈color〉</code></entry>
<entry><code>rgba(0,0,0,0)</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#background-color">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-clip</phrase></entry>
<entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
<entry><code>border-box</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-clip">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-origin</phrase></entry>
<entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
<entry><code>padding-box</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-origin">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-size</phrase></entry>
<entry><code>〈bg-size〉 [ , 〈bg-size〉 ]*</code></entry>
<entry><code>auto</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-size">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-position</phrase></entry>
<entry><code>〈position〉 [ , 〈position〉 ]*</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#background-position">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-repeat</phrase></entry>
<entry><code>〈bg-repeat〉 [ , 〈bg-repeat〉 ]*</code></entry>
<entry><code>repeat</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#background-repeat">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">background-image</phrase></entry>
<entry><code>〈bg-image〉 [ , 〈bg-image〉 ]*</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#background-image">CSS3</ulink></entry>
<entry>not supported: urls without quotes, CSS radial gradients, colors in crossfades</entry>
</row>
<row>
<entry><phrase role="nowrap">background-blend-mode</phrase></entry>
<entry><code>〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>only affects multiple backgrounds</entry>
</row>
<row>
<entry><phrase role="nowrap">box-shadow</phrase></entry>
<entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-background/#box-shadow">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry>background</entry>
<entry><code>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-background/#background">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈box〉 = border-box | padding-box | content-box</code>
<code>〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain</code>
<code>〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}</code>
<code>〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code>
<code>〈bg-image〉 = 〈image〉 | none</code>
<code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 || 〈color〉</code>
<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion ||</code>
<code> hard-light || hue || lighten || luminosity || multiply || normal || overlay ||</code>
<code> saturate || screen || soft-light</code>
<code>〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?</code>
</literallayout>
<para>
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.
</para>
<para>
Alternatively, multiple backgrounds can be blended using the <code>background-blend-mode</code> property.
</para>
<table pgwide="1">
<title>Transition properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">transition-property</phrase></entry>
<entry><code>none | all | 〈property name〉 [ , 〈property name〉 ]*</code></entry>
<entry><code>all</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-property">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">transition-duration</phrase></entry>
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
<entry><code>0s</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-duration">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">transition-timing-function</phrase></entry>
<entry><code>〈single-timing-function〉 [ , 〈single-timing-function〉 ]*</code></entry>
<entry><code>ease</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">transition-delay</phrase></entry>
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
<entry><code>0s</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-delay">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">transition</phrase></entry>
<entry><code>〈single-transition〉 [ , 〈single-transition〉 ]*</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code>
<code> step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code>
<code> cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code>
<code>〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code>
</literallayout>
<table pgwide="1">
<title>Animation properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">animation-name</phrase></entry>
<entry><code>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-name">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-duration</phrase></entry>
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
<entry><code>0s</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-duration">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-timing-function</phrase></entry>
<entry><code>〈single-timing-function〉 [ , 〈single-timing-function〉 ]*</code></entry>
<entry><code>ease</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-timing-function">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-iteration-count</phrase></entry>
<entry><code>〈single-animation-iteration-count〉 [ , 〈single-animation-iteration-count〉 ]*</code></entry>
<entry><code>1</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-direction</phrase></entry>
<entry><code>〈single-animation-direction〉 [ , 〈single-animation-direction〉 ]*</code></entry>
<entry><code>normal</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-direction">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-play-state</phrase></entry>
<entry><code>〈single-animation-play-state〉 [ , 〈single-animation-play-state〉 ]*</code></entry>
<entry><code>running</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-play-state">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-delay</phrase></entry>
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
<entry><code>0s</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-delay">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry><phrase role="nowrap">animation-fill-mode</phrase></entry>
<entry><code>〈single-animation-fill-mode〉 [ , 〈single-animation-fill-mode〉 ]*</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
<tgroup cols="5">
<thead>
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">animation</phrase></entry>
<entry><code>〈single-animation〉 [ , 〈single-animation〉 ]*</code></entry>
<entry>see individual properties</entry>
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈single-animation-name〉 = none | 〈property name〉</code>
<code>〈single-animation-iteration-count〉 = infinite | 〈number〉</code>
<code>〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse</code>
<code>〈single-animation-play-state〉 = running | paused</code>
<code>〈single-animation-fill-mode〉 = none | forwards | backwards | both</code>
<code>〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code>
<code> 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 ||</code>
<code> 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code>
</literallayout>
<table pgwide="1">
<title>Key binding properties</title>
<tgroup cols="7">
<colspec colnum="4" align="center"/>
<colspec colnum="5" align="center"/>
<thead>
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
</thead>
<tbody>
<row>
<entry><phrase role="nowrap">-gtk-key-bindings</phrase></entry>
<entry><code>none | 〈binding name〉 [ , 〈binding name〉 ]*</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<para>
〈binding name〉 must have been assigned to a binding set with a @binding-set rule.
</para>
</refsect1>
</refentry>