CSS线性渐变规则

Question

I found this lying around:

background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);

I assume the 2nd and 3rd params are the start and end color of the gradient, but what exactly does the first param "center top" mean?

Given that -moz-linear-gradient is obviously specific to Mozilla, what's the equivalent CSS3 standard version of this rule?

Answer 1

Please have a look to the MDN . If I read right you can obmit the prefix.

<side-or-corner>

Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.

The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.

Answer 2

For all browsers:

background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top,  #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */