CSS3 笔记二（Gradients）

CSS3 Gradients

Two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

Linear Gradients

syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1> Top to Bottom (this is default)

Example

1 #grad {
2     background: red; /* For browsers that do not support gradients */
3     background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
4     background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
5     background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
6     background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
7 }

2> Left to Right

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
4   background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
5   background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
6   background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
7 }

3> Diagonal

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
4   background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
5   background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
6   background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
7 }

4> Using Angles

background: linear-gradient(angle, color-stop1, color-stop2);

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
4   background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
5   background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
6   background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
7 }

5> Using Multiple Color Stops

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
4   background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
5   background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
6   background: linear-gradient(red, yellow, green); /* Standard syntax */
7 }

6> Using Transparency

Example

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

7> Repeating a linear-gradient

Example1

 1 #grad {
 2   background: red; /* For browsers that do not support gradients */
 3   /* Safari 5.1 to 6.0 */
 4   background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
 5   /* Opera 11.1 to 12.0 */
 6   background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
 7   /* Firefox 3.6 to 15 */
 8   background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
 9   /* Standard syntax */
10   background: repeating-linear-gradient(red, yellow 10%, green 20%);
11 }

Example2

1 #grad {
2     background: repeating-linear-gradient(red, blue 20px, red 40px);
3     background: -webkit-repeating-linear-gradient(red, blue 20px, red 40px);
4     background: -moz-repeating-linear-gradient(red, blue 20px, red 40px);
5 }

Radial Gradients

syntax

background: radial-gradient(shape size at position, start-color, ..., last-color);

1> Evenly Spaced Color Stops (this is default)

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
4   background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
5   background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
6   background: radial-gradient(red, yellow, green); /* Standard syntax */
7 }

2> Differently Spaced Color Stops

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
4   background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
5   background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
6   background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
7 }

3> Set Shape

ellipse（default value）
circle

Example

1 #grad {
2   background: red; /* For browsers that do not support gradients */
3   background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
4   background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
5   background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
6   background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
7 }

4> Use of Different Size Keywords

closest-side
farthest-side
closest-corner
farthest-corner

Example

 1 #grad1 {
 2   background: red; /* For browsers that do not support gradients */
 3   /* Safari 5.1 to 6.0 */
 4   background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);
 5   /* For Opera 11.6 to 12.0 */
 6   background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
 7   /* For Firefox 3.6 to 15 */
 8   background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
 9   /* Standard syntax */
10   background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
11 }
12 
13 #grad2 {
14   /* Safari 5.1 to 6.0 */
15   background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
16   /* Opera 11.6 to 12.0 */
17   background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
18   /* For Firefox 3.6 to 15 */
19   background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
20   /* Standard syntax */
21   background: radial-gradient(farthest-side at 60px 55px, red, yellow, black);
22 }

5> Repeating a radial-gradient

Example

 1 #grad {
 2   background: red; /* For browsers that do not support gradients */
 3   /* For Safari 5.1 to 6.0 */
 4   background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
 5   /* For Opera 11.6 to 12.0 */
 6   background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
 7   /* For Firefox 3.6 to 15 */
 8   background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
 9   /* Standard syntax */
10   background: repeating-radial-gradient(red, yellow 10%, green 15%);
11 }