CSS3 Background Color Gradient Properties compatibility Test Basic Environment: Windows system; ie6.0+, firefox4.0+, chrome4.0+, safari4.0+, opera15.0+

CSS3 Background Color Gradient Properties compatibility Test Basic Environment: Windows system; ie6.0+, firefox4.0+, chrome4.0+, safari4.0+, opera15.0+ syntax:

<linear-gradient>: linear-gradient ([<point>,]? <color-stop>[, <color-stop>]+);

<point>: [left | right]? [Top | bottom]? | | <angle>?

<color-stop>:<color> [<length> | <percentage>]?

Value:<point>

Left

Sets the horizontal axis value for the start of the gradient on the left.

Right

Sets the horizontal value of the start of the gradient to the right.

Top

Sets the ordinate value at the top for the start of the gradient.

Bottom

Sets the ordinate value at the bottom for the start of the gradient.

<angle>:

Specifies the direction (or angle) of the gradient with an angle value.

<color-stop>:

specifies the starting and ending color of the gradient.

<color-stop>

<color>:

Specifies the color. See Color values

<length>:

Specify the starting and ending color position with a length value. Negative values are not allowed

<percentage>:

Specify the start and end

color position in percent.

Description creates an image with a linear gradient.

• Firefox also supports the use of <percentage>, <length>, and center special values to define the starting point of a gradient and to support starting point and angle.

• Example code:

  
  (Figure I)

  linear-gradient(#fff,#333);linear-gradient(top,#fff,#333);linear-gradient(bottom,#333,#fff);linear-gradient(-90deg,#fff,#333);

  The above code can be implemented as a gradient effect (figure I)

Compatibility:

• Light green = Support
• Red = not supported
• Pink = Partial Support

ie	firefox	safari	chrome	opera
6-9  #1	4.0-15.0 -moz-	4.0-6.0 -webkit-	4.0-25.0  -webkit-  #2	15.0
10.0	16.0	6.1	26.0

1. ie5.5-9.0 uses a private filter to achieve this effect: progid:DXImageTransform.Microsoft.Gradient ()
2. chrome4.0-9.0 using older syntax:-webkit-gradient (linear,...)

CSS3 Background Color Gradient Properties compatibility Test Basic Environment: Windows system; ie6.0+, firefox4.0+, chrome4.0+, safari4.0+, opera15.0+