A gradient effect is a value of the Backround-image property, and the syntax format is as follows:
Background-image:linear-gradient (azimuth, starting color, end color);
Where the azimuth is optional, the starting and ending colors are required, and if the azimuth parameter is not specified, the default gradient is from the top down.
The value of the azimuth support: to the top of right, to the right, to the bottom, to the bottom left, to the right, and to the top, and so on, in addition, the side is also supported angle unit deg.
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Gradient Effect Instance </title> <style type= "Text/css" >
#d1 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--Not configured azimuth parameters, by default from the top down-->
Background-image:linear-gradient (green,red)
}
#d2 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--configured with side parameters, from top left to bottom right-->
Background-image:linear-gradient (to bottom right,green,red)
}
#d3 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--use angular orientation, 45° gradient, 0°=to top,45°=to top right, can be negative, negative gradient direction and positive value relative to the shape of the perpendicular bisector flip-->
Background-image:linear-gradient (45deg,green,red)
}
</style>
<body>
<div id= "D1" >
Www.111cn.net
</div>
<br>
<div id= "D2" >
Www.111cn.net
</div>
<br>
<div id= "D3" >
Www.111cn.net
</div>
</body>
|
Display effect:
Www.111cn.net
Www.111cn.net
Www.111cn.net
0x2. Multi-color Gradient
You can configure multiple color values within linear-gradient to achieve a multicolor gradient effect, see the following example:
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "UTF-8" >
<title> multi-color Gradient effect instance </title> <style type= "Text/css" >
#d1 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--use a 4-color gradient, by default four colors will be evenly distributed, red and green baseline at both ends, and in this case the div width is 250px, then the yellow baseline position is about 83.33px-->
Background-image:linear-gradient (to Right,red,yellow,blue,green);
}
#d2 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--after color followed by pixel units or percentages can change the baseline position, the green baseline is originally in 250px, that is, Div's sideline, now adjust to 200px, because the green right no other color properties, so will not occur gradient-->
Background-image:linear-gradient (to right,red 0px,yellow 20px,blue 166.66px,green 200px);
}
#d3 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--set baseline using percentages-->
Background-image:linear-gradient (to Right,red,yellow 50%,blue 70%,green);
}
</style>
<body>
<div id= "D1" >
Www.111cn.net
</div>
<br>
<div id= "D2" >
Www.111cn.net
</div>
<br>
<div id= "D3" >
Www.111cn.net
</div>
</body>
|
Display effect:
Www.111cn.net
Www.111cn.net
Www.111cn.net
0x3. Transparent gradient
The gradient fits the RGBA color selector to achieve the hierarchical effect of the image, see the following example:
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "UTF-8"
< Title> transparent Gradient Effect instance </title> <style type= "text/css"
#d1 {
width:250px;
height:250px;
text-align:center;
line-height:250px;
<!--configuration background is red;
background-color:red
<!--on the basis of the background color, from the bottom up to configure a transparent gradient, the bottom is 0.7 black transparent, the top black is completely transparent, so that the original red background on the basis of a layer from the bottom to the upper gradient of the black effect;
Background-image:linear-gradient (to Top,rgba (0,0,0,0.7), Rgba (0,0,0,0));
}
</style>
<body>
<div id= "D1"
Www.111cn.net
</div> </body>
|
Display effect:
Www.111cn.net
0x4. Tile Gradient
With the setting of the baseline, the tile gradient enables repeated tiles from the starting color guideline position to the ending color guideline position, see the following example:
| The code is as follows |
Copy Code |
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Tile Gradient Effect Example </title> <style type= "Text/css" >
#d1 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--This example uses a three-color gradient, red is the starting color, blue is the end color, set the end color of the line in the Div box from the top down 20%, because the use of tile gradient, the remaining 80% will use the same color repeat fill-->
Background-image:repeating-linear-gradient (Red,yellow,blue 20%);
}
</style>
<body>
<div id= "D1" >
Www.111cn.net
</div> </body>
|
Display effect:
Www.111cn.net
0x5. Radioactive gradients
A radioactive gradient is slightly different from a normal gradient, which, as the name suggests, will present a radioactive effect rather than a linear effect, looking at a few concepts first.
1) Radiation source shape
Circle round;
Ellipse ellipse (default value);
2) Divergent direction
At top is diffused from the center of the head;
At the left from the center of the middle divergence;
At right from the middle of the center divergence;
At bottom from the bottom of the central divergence;
At center is diverging from the center point of the graphic (default value);
At top right is diverging from the tops of the right-hand side;
At top left is diverging from the front of the head;
At the bottom left divergence from the bottom left-hand side;
At bottom right is diverging from the bottom right-hand side;
3) Radius of radiation source
Closest-side specifies the radius of the radial gradient from the center to the nearest edge from the center of the circle;
Closest-corner specifies that the radius of the radial gradient is the closest angle from the center to the nearest center;
Farthest-side specifies that the radius of the radial gradient is the distance from the center to the farthest edge from the center;
Farthest-corner specifies the radius of the radial gradient to be the farthest from the center to the center of the circle;
4) Configuration Syntax
Background-image:radial-gradient ([Radiation source shape] [divergence direction] [radial source radius] [Specify radial radius],[color value 1],[color value 2],[color value 3],[color value n]);
In addition to the color values 1 and 2 are required, the rest are optional parameters.
Here is an example to illustrate the above concepts:
| The code is as follows |
Copy Code |
| <! DOCTYPE html>
<meta charset= "UTF-8" >
<title> example of radiation gradient effect </title> <style type= "Text/css" >
#d1 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--The default radioactive gradient, from the graphics center point to the gradient, gradient color support Two-color and multi-color, this example uses three colors-->
Background-image:radial-gradient (Green,red,yellow);
}
#d2 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--Configure the center point of the gradient as the top center and configure the radioactive graphic to be circular (the default is oval)-->
Background-image:radial-gradient (circle at Top,green,red,yellow);
}
#d3 {
width:250px;
height:400px;
Text-align:center;
line-height:400px;
<!--configure which edge of the radial radius to use as a reference, this example intentionally sets the div's height to 400px and uses the radius from the center to the farthest edge of the center as the radial radii-->
Background-image:radial-gradient (Farthest-side,green,red,yellow);
}
#d4 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--set radial radius to 80px-->
Background-image:radial-gradient (80px,green,red);
}
#d5 {
width:250px;
height:250px;
Text-align:center;
line-height:250px;
<!--set radial radius to 80px and use tile gradient-->
Background-image:repeating-radial-gradient (80px,green,red,yellow);
}
</style>
<body>
<div id= "D1" >
Www.111cn.net
</div>
<br>
<div id= "D2" >
Www.111cn.net
</div>
<br>
<div id= "D3" >
Www.111cn.net
</div>
<br>
<div id= "D4" >
Www.111cn.net
</div>
<br>
<div id= "D5" >
Www.111cn.net
</div>
</body>
|
