HTML and CSS Reference
In-Depth Information
top, #0ae, #fff 50%, #6c0 50%, #fff);
background: -moz-linear-gradient(
to bottom, #0ae, #fff 50%, #6c0 50%, #fff);
background: -o-linear-gradient(
to bottom, #0ae, #fff 50%, #6c0 50%, #fff);
background: linear-gradient(
to bottom,#0ae,#fff 50%,#6c0 50%,#fff);
Support for
current draft
(at the time of
writing, just IE10)
This will produce a two-tone gradient like
the following in all browsers that support
CSS3 gradients.
You can see this example in ch10/gradient-
15.html. Browsers that don't support gradi-
ents display a green background; every-
thing else shows the gradient.
Cross-browser backgrounds and border-image
border-image has changed significantly since it was first introduced. All
the original implementations follow the shorthand property from the
September 2008 Working Draft. Following that draft, significant
changes were made that added specific properties for each component,
such as border-image-source , border-image-slice , and the fill keyword.
Before, border-image was like a subproperty of border ; now it's a stand-
alone property with subproperties of its own.
It's likely that vendors will move toward the new syntax when the spec
reaches the Proposed Recommendation status. In the meantime, you
can use it in a cross-browser way while still being compatible with the
current spec:
Legacy Firefox
-moz-border-image: url('border1.png') 80;
Legacy WebKit
-webkit-border-image: url('border1.png') 80;
Legacy Opera
-o-border-image: url('border1.png') 80;
Support for 2008 draft
border-image: url('border1.png') 80;
Support for current
draft implementations
border-image: url('border1.png') 80 fill;
Search WWH ::

Custom Search