Revision 27928 of column-rule

  • Revision slug: CSS/column-rule
  • Revision title: column-rule
  • Revision id: 27928
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment page created, 259 words added

Revision Content

{{ CSSRef() }} {{ Fx_minversion_header("3") }}

Summary

The column rule property lets you set the style, width, and color of the rule drawn between columns in multi-column layouts.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: a color and four lengths

Syntax

-moz-column-rule: none | {{ mediawiki.external('<shadow>, ') }}</shadow>* <shadow> | {{ Cssxref("inherit") }} ;

where <shadow> is defined as:

[ {{ Xref_csscolorvalue() }}? {{ Xref_csslength() }} <length> <length>? <length>? | <length> <length> <length>? <length>? <color>? ]

Values

<color> 
The shadow color. If not specified, the CSS specification allows the browser to determine the color. In Mozilla, the value of 'color' is used.
<length> <length> 
The first two lengths are the X and Y offsets from the element respectively. i.e. you can place a shadow directly behind the element if you set both these values to 0px.
<length> 
The third length specifies the blur radius. The higher this value, the bigger the blur, so the shadow becomes bigger and lighter. If not specified, this will be 0px.
<length> 
The fourth length specifies the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, this will be 0px; i.e, the shadow will be the same size as the actual element.

Examples

  #header {-moz-box-shadow: black 0px 0px 5px;}
  .shadow {-moz-box-shadow: red 2px 2px 2px -2px, blue 4px 4px;}

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer N/A
Opera N/A
Safari 3.0

Revision Source

<p>{{ CSSRef() }} {{ Fx_minversion_header("3") }}</p>
<h3 name="Summary">Summary</h3>
<p>The column rule property lets you set the style, width, and color of the rule drawn between columns in multi-column layouts.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: a color and four lengths</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<p><code>-moz-column-rule: none | {{ mediawiki.external('<shadow>, ') }}</shadow>* &lt;shadow&gt; | </code>{{ Cssxref("inherit") }} ;</p>
<p>where <code>&lt;shadow&gt;</code> is defined as:</p>
<p><code>[ </code> {{ Xref_csscolorvalue() }}? {{ Xref_csslength() }} <code>&lt;length&gt; &lt;length&gt;? &lt;length&gt;? | &lt;length&gt; &lt;length&gt; &lt;length&gt;? &lt;length&gt;? &lt;color&gt;? ]</code></p>
<h3 name="Values">Values</h3>
<dl><dt> <code>&lt;color&gt;</code> </dt><dd> The shadow color. If not specified, the CSS specification allows the browser to determine the color. In Mozilla, the value of <a href="/en/CSS/color" title="en/CSS/color">'color'</a> is used. </dd></dl> <dl><dt> <code>&lt;length&gt; &lt;length&gt;</code> </dt><dd> The first two lengths are the X and Y offsets from the element respectively. i.e. you can place a shadow directly behind the element if you set both these values to 0px. </dd></dl> <dl><dt> <code>&lt;length&gt;</code> </dt><dd> The third length specifies the blur radius. The higher this value, the bigger the blur, so the shadow becomes bigger and lighter. If not specified, this will be 0px. </dd></dl> <dl><dt> <code>&lt;length&gt;</code> </dt><dd> The fourth length specifies the spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, this will be 0px; i.e, the shadow will be the same size as the actual element. </dd></dl>
<h3 name="Examples">Examples</h3>
<pre>  #header {-moz-box-shadow: black 0px 0px 5px;}
</pre>
<pre>  .shadow {-moz-box-shadow: red 2px 2px 2px -2px, blue 4px 4px;}
</pre>
<h3 name="Notes">Notes</h3>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-box-shadow">CSS 3 Editor's Draft</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>N/A</td> </tr> <tr> <td>Opera</td> <td>N/A</td> </tr> <tr> <td>Safari</td> <td>3.0</td> </tr> </tbody>
</table>
Revert to this revision