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

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

2> Left to Right

Example

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

3> Diagonal

Example

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

4> Using Angles

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

Example

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

5> Using Multiple Color Stops

Example

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

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

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

Example2

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

Radial Gradients

syntax

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

1> Evenly Spaced Color Stops (this is default)

Example

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

2> Differently Spaced Color Stops

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

3> Set Shape

• ellipse（default value）
• circle

Example

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

4> Use of Different Size Keywords

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

Example

 #grad1 {
   background: red; /* For browsers that do not support gradients */
   /* Safari 5.1 to 6.0 */
   background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);
   /* For Opera 11.6 to 12.0 */
   background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
   /* For Firefox 3.6 to 15 */
   background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
   /* Standard syntax */
   background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
 }

 #grad2 {
   /* Safari 5.1 to 6.0 */
   background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
   /* Opera 11.6 to 12.0 */
   background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
   /* For Firefox 3.6 to 15 */
   background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
   /* Standard syntax */
   background: radial-gradient(farthest-side at 60px 55px, red, yellow, black);
 } 

5> Repeating a radial-gradient

Example

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