- Gradual change
Gradient ( Gradient ) is CSS3 features introduced, which defines see the CSS Level Images Module1 . 3. It is essentially a 2D image can background - Image , List - style - Image and border for fine coloring.
- Gradient itself is no inherent size, although the size of the gradient block specific
To specify a gradient effect, simply define these three elements, you can:
- Gradient line ( gradient Line )
- Starting (gradient line Starting Point ) and an end point ( Ending Point )
- The color values of the start and end points
In this way, the color will fill in the rest of the line is smoothly graded.
Gradient type, geometrically, can be:
- Line ( Line ): corresponding to the CSS linear gradient ( Linear gradient )
- Radiation ( ray ): corresponding to the CSS radial gradient ( Radial gradient )
- Helix ( Spiral ): corresponds CSS cone gradient ( Conic gradient )
Type syntax:
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> |
<radial-gradient()> | <repeating-radial-gradient()> |
<conic-gradient()> | <repeating-conic-gradient()>
- Gradient three elements: gradient line, start and end points, color sequence
The syntax is:
linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]?,
<color-stop-list>
)
/*
参1：角度/渐变颜色走向
to top, to right, to bottom, to left，对应到<angle>分别是 0deg, 90deg, 180deg, 270deg
参2：渐变具体颜色 可接收多个颜色
*/For example:
