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