gtk2/docs/reference/gtk/css-properties.xml

1438 lines
66 KiB
XML
Raw Normal View History

<?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</refentrytitle>
<manvolnum>3</manvolnum>
<refmiscinfo>GTK Library</refmiscinfo>
</refmeta>
<refnamediv>
<refname>GTK+ CSS</refname>
<refpurpose>
GTK+ CSS Properties
</refpurpose>
</refnamediv>
<!--
Formatting conventions:
We use
U+2011 Non-breaking Hyphen
  U+00A0 No-break Space
to control line breaks in the Name and Value columns.
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>
2016-02-13 04:40:26 +00:00
<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>
2016-02-05 05:53:11 +00:00
<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>
2016-02-26 05:13:34 +00:00
<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 ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code>
</literallayout>
2016-02-13 04:40:26 +00:00
<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
2016-02-13 04:40:26 +00:00
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 and Filter 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>color</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>opacity</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>
<row>
<entry>filter</entry>
<entry><code>none | 〈filter-function-list〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈filter-function-list〉 = [ 〈filter〉]+</code>
<code>〈filter〉 = brightness( 〈number〉 ) |</code>
<code> contrast( 〈number〉 ) |</code>
<code> grayscale( 〈number〉 ) |</code>
<code> hue-rotate( 〈number〉 ) |</code>
<code> invert( 〈number〉 ) |</code>
<code> opacity( 〈number〉 ) |</code>
<code> saturate( 〈number〉 ) |</code>
<code> sepia( 〈number〉 )</code>
</literallayout>
<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. The filter property
specifies filters to be applied to the rendering.
</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>fontfamily</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>fontsize</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>fontstyle</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>fontvariant</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>fontweight</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>fontstretch</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>gtkdpi</entry>
<entry><code>〈number〉</code></entry>
<entry>screen resolution</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>font</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>
2016-01-08 04:56:03 +00:00
<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>caret-color</entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
2016-01-08 04:56:03 +00:00
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS3</ulink></entry>
2016-01-08 04:56:03 +00:00
<entry>CSS allows an auto value</entry>
</row>
<row>
<entry>-gtk-secondary-caret-color</entry>
<entry><code>〈color〉</code></entry>
<entry><code>currentColor</code></entry>
2016-01-08 04:56:03 +00:00
<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>letterspacing</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>textdecorationline</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>textdecorationcolor</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>textdecorationstyle</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>textshadow</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>textdecoration</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>gtkiconsource</entry>
<entry><code>builtin | 〈image〉 | none</code></entry>
<entry><code>builtin</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkicontransform</entry>
<entry><code>none | 〈transform〉+</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkiconstyle</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>gtkicontheme</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>gtkiconpalette</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>gtkiconshadow</entry>
<entry><code>none | 〈shadow〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkiconfilter</entry>
<entry><code>none | 〈filter-function-list〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS3</ulink></entry>
<entry></entry>
</row>
<row>
<entry>gtkiconsize</entry>
<entry><code>〈length〉</code></entry>
<entry><code>none</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry>Determines the size at which icons are displayed</entry>
</row>
</tbody>
</tgroup>
</table>
<literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) |</code>
<code> matrix3d( 〈number〉 [ , 〈number〉 ]{15} ) |</code>
<code> translate( 〈length〉, 〈length〉 ) | translate3d( 〈length〉, 〈length〉, 〈length〉 ) |</code>
<code> translateX( 〈length〉 ) | translateY( 〈length〉 ) | translateZ( 〈length〉 ) |</code>
<code> scale( 〈number〉[ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉) |</code>
<code> scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | scaleZ( 〈number〉 ) |</code>
<code> rotate( 〈angle〉 ) | rotate3d( 〈number〉, 〈number〉, 〈number〉, 〈angle〉 ) |</code>
<code> rotateX( 〈angle〉 ) | rotateY( 〈angle〉 ) | rotateZ( 〈angle〉 ) |</code>
<code> skew( 〈angle〉 [ , 〈angle〉 ]? ) | skewX( 〈angle〉 ) | skewY( 〈angle〉 )</code>
2016-01-14 03:47:37 +00:00
<code>〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code>
</literallayout>
<para>
2016-01-14 04:06:32 +00:00
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>minwidth</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>minheight</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>margintop</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>marginright</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>marginbottom</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>marginleft</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>paddingtop</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>paddingright</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>paddingbottom</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>paddingleft</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>margin</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>padding</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>bordertopwidth</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>borderrightwidth</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>borderbottomwidth</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>borderrightwidth</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/TR/css3-background/#the-border-width">CSS3</ulink></entry>
<entry>CSS allows other values</entry>
</row>
<row>
<entry>bordertopstyle</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>borderrightstyle</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>borderbottomstyle</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>borderleftstyle</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>bordertoprightradius</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>borderbottomrightradius</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>borderbottomleftradius</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>bordertopleftradius</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>bordertopcolor</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>borderrightcolor</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>borderbottomcolor</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>borderleftcolor</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>borderimagesource</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>borderimagerepeat</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>borderimageslice</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>borderimagewidth</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>borderwidth</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>borderstyle</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>bordercolor</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>bordertop</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>borderleft</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>borderbottom</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>borderright</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>border</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>borderradius</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>borderimage</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>outlinestyle</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>outlinewidth</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>outlinecolor</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>outlineoffset</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>gtkoutlinetopleftradius</entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkoutlinetoprightradius</entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkoutlinebottomrightradius</entry>
<entry><code>〈corner radius〉</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry></entry>
<entry></entry>
</row>
<row>
<entry>gtkoutlinebottomleftradius</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>outline</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>gtkoutlineradius</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>backgroundcolor</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>backgroundclip</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>backgroundorigin</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>backgroundsize</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>backgroundposition</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>backgroundrepeat</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>backgroundimage</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, colors in crossfades</entry>
</row>
<row>
<entry>background-blend-mode</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>boxshadow</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><para>background</para></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 || hard-light || hue || lighten || luminosity || multiply || normal || overlay || 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>transitionproperty</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>transitionduration</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>transitiontimingfunction</entry>
<entry><code>〈singletimingfunction〉[ , 〈singletimingfunction〉 ]*</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>transitiondelay</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>transition</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>animationname</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>animationduration</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>animationtimingfunction</entry>
<entry><code>〈singletimingfunction〉 [ , 〈singletimingfunction〉 ]*</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>animationiteration-count</entry>
<entry><code>〈singleanimationiterationcount〉 [ , 〈singleanimationiterationcount〉 ]*</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>animationdirection</entry>
<entry><code>〈singleanimationdirection〉 [ , 〈singleanimationdirection〉 ]*</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>animationplaystate</entry>
<entry><code>〈singleanimationplaystate〉 [ , 〈singleanimationplaystate〉 ]*</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>animationdelay</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>animationfillmode</entry>
<entry><code>〈singleanimationfillmode〉 [ , 〈singleanimationfillmode〉 ]*</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>animation</entry>
<entry><code>〈singleanimation〉 [ , 〈singleanimation〉]*</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〉 || 〈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>gtkkeybindings</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>
<table pgwide="1">
<title>Table-related 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>borderspacing</entry>
<entry><code>〈length〉{1,2}</code></entry>
<entry><code>0</code></entry>
<entry></entry>
<entry></entry>
<entry><ulink url="https://www.w3.org/TR/CSS2/tables.html#separated-borders">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/2016/WD-css-tables-3-20161025/#border-spacing-property">CSS3</ulink></entry>
<entry></entry>
</row>
</tbody>
</tgroup>
</table>
<para>
The border-spacing property is respected by GtkBox and GtkGrid, and by box gadgets that
are used internally in complex widgets.
</para>
</refsect1>
</refentry>