HTML and CSS Reference
In-Depth Information
keywords ( left , center , right + top , center , and bottom ), length values, percentage
values, or a combination thereof. An example is given in Figure 15-9 , in which the
gradient origin is moved to the bottom right of the element.
radial-gradient(at right bottom, gray, black);
Figure 15-9. Bottom-right origin
Support for the radial-gradient() function is largely the same as for
linear-gradient() when used together with the -moz , -webkit , and -o vendor prefixes.
Like linear-gradient() , the syntax for the radial gradient has gone through some
revisions. An example of a full cross-browser syntax is shown here:
.radial-gradient
{
background-color: red; /* fallback color */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(radial, center center, 0px, center
center, 100%, color-stop(0%,red), color-stop(100%,orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background: -webkit-radial-gradient(center, ellipse cover, red 0%,
orange 100%);
/* Firefox 3.6-16 */
background: -moz-radial-gradient(center, ellipse cover, red 0%,
orange 100%);
/* Opera 11.6-12.1 */
background: -o-radial-gradient(center, ellipse cover, red 0%,
orange 100%);
/* Standard syntax */
background: radial-gradient(ellipse at center, red 0%, orange 100%);
}
 
Search WWH ::




Custom Search