Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. Similar to closest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients). For elliptical gradients, the gradient-shape has the same ratio of width to height that it would if closest-side was specified. Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center. Percentages can only be used to specify the size of an elliptical gradient, not a circular one.Negative values are invalid.įor circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. Percentage values are relative to the corresponding dimension of the gradient box.
If two values (length or percent) are specified, the first value represents the horizontal radius, and the second the vertical radius. If one length value is specified, it indicates the radius of the circle. One or two space-delimited length values or two percentages. If this value is omitted, it defaults to farthest-corner. Size Optional value that specifies the size of the gradient's ending shape. Indicates gradient is in the shape of an circle. Indicates gradient is in the shape of an ellipse. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise. shape Optional value that specifies the ending shape of the gradient. If this value is omitted, it defaults to center. This value can take the same values as the background-position property.
] +) Parameters position Optional value that specifies the center of the gradient. To maximize backward compatibility, those older implementations are still recognized, as described in -ms-radial-gradient. The syntax for the radial-gradient function given in this topic is different from that supported in previous pre-releases of Internet Explorer 10, which required the "-ms-" prefix.
Important The Cascading Style Sheets (CSS) Gradients properties do not require a vendor prefix (that is, "-ms-") to work correctly in Internet Explorer 10. Use the closest-side or farthest-side keywords to size the gradient so that the ending shape meets either the closest or farthest side, respectively, of the gradient box.īackground-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF) Of course, you can also originate the radial gradient in locations other than the center of the gradient box. Either of the declarations produces the image here.īackground-image: radial-gradient(#FFF133, #16D611, #00A3EF) īackground-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%) The following example has three colors specified. The following example is similar to the previous example, but a circular gradient has been specified.īackground-image: radial-gradient(circle, yellow, blue) For instance, all three of the following examples, when applied to a 250×150-pixel div element, produce the image shown here.īackground-image: radial-gradient(yellow, blue) īackground-image: radial-gradient(ellipse at center, yellow 0%, blue 100%) īackground-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue) Often different radial gradient syntax can be used to produce the same results.
0 kommentar(er)
