Gradient in CSS3

Gradient is a relatively interesting attribute in CSS3. after learning the gradient, you can make a very dazzling thing. In CSS3, Gradient is classified into linear-gradient (linear gradient) and radial-Gradient (radial gradient ). Next we will introduce Gradient in CSS3 in detail.

1. Gradient syntax

1. Linear Gradient Syntax:

Object selector {background:-browser prefix-linear-gradient (start direction, start color, end color );}

　　

Object selector {background:-browser prefix-radial-gradient (start direction, shape, size, start color, end color );}

　　

　　

(1) Firefox 3.6 +

Background:-moz-linear-gradient (start direction, start color, end color );

(2) Safari 4-5, Chrome 1-9

Background:-webkit-linear-gradient (start direction, start color, end color );

(3) Opera 11.10 +

Background:-o-linear-gradient (start direction, start color, end color );

　　

Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = # 1471da, endColorstr = # 1C85FB );

　　

　　

(1) Firefox 3.6 +

Background:-moz-radial-gradient (starting point direction, shape, size, starting point color, ending point color );

(2) Safari 4-5, Chrome 1-9

Background:-webkit-radial-gradient (starting point direction, shape, size, starting point color, ending point color );

　　

　　

div {height:100px;width:100px;   background: -webkit-linear-gradient( top,red,green,gray,yellow,pink,purple);}

　　

<div></div>

　　

2. linear gradient at different angles

　　

span {height:100px;width:100px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-linear-gradient( 0deg,#ccc,#000);}.s2 {background: -webkit-linear-gradient( 45deg,#ccc,#000);}.s3 {background: -webkit-linear-gradient( 90deg,#ccc,#000);}.s4 {background: -webkit-linear-gradient( 135deg,#ccc,#000);}.s5 {background: -webkit-linear-gradient( 180deg,#ccc,#000);}.s6 {background: -webkit-linear-gradient( 225deg,#ccc,#000);}.s7 {background: -webkit-linear-gradient( 270deg,#ccc,#000);}.s8 {background: -webkit-linear-gradient( 315deg,#ccc,#000);}.s9 {background: -webkit-linear-gradient( 360deg,#ccc,#000);}

　　

<Span class = "s1"> 0 degrees </span> <span class = "s2"> 45 degrees </span> <span class = "s3"> 90 degrees </ span> <span class = "s4"> 135 degrees </span> <span class = "s5"> 180 degrees </span> <span class = "s6"> 225 degrees </span> <span class = "s7"> 270 degrees </span> <span class = "s8"> 315 degrees </span> <span class = "s9"> 360 degrees </span>

　　

　　

　　

span {height:100px;width:180px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-radial-gradient(ellipse closest-side, #ccc, red 10%, #000 50%, #ccc);}.s2 {background: -webkit-radial-gradient(ellipse closest-corner, #ccc, red 10%, #000 50%, #ccc);}.s3 {background: -webkit-radial-gradient(ellipse farthest-side, #ccc, red 10%, #000 50%, #ccc);}.s4 {background: -webkit-radial-gradient(ellipse farthest-corner, #ccc, red 10%, #000 50%, #ccc);}.s5 {background: -webkit-radial-gradient(ellipse contain, #ccc, red 10%, #000 50%, #ccc);}.s6 {background: -webkit-radial-gradient(ellipse cover, #ccc, red 10%, #000 50%, #ccc);}

　　

<Span class = "s1"> nearest end </span> <span class = "s2"> nearest end </span> <span class = "s3"> far end </span>/ span> <span class = "s4"> farthest corner </span> <span class = "s5"> include </span> <span class = "s6"> overwrite </ span>

　　

　　

　　

span {height:100px;width:180px;float:left;margin:5px;color:yellow;}.s1 {background: -webkit-repeating-linear-gradient(top, #ace, #ace 5px, #f96 5px, #f96 10px);}.s2 {background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);}

　　

<span class="s1"></span><span class="s2"></span>

　　

The Gradient of CSS3 is introduced here. For more information about CSS3 attributes, please pay attention to the updates related to CSS3 in this blog. For more suggestions on CSS3, thank you for your long-term attention to Menglong blog.