How to use css to achieve gradient effect
This article will explain in detail how to use css to achieve gradient effect, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.
1. Css background color gradient style
1. CSSS linear background gradient style
Syntax:
Background-image:linear-gradient (| |,)
The first parameter is the starting point or angle of the gradient. The second parameter is a color stop point (colorstops). You need at least two colors (start and end), and you can add any color to increase the richness of the color gradient. The definition of a color stop can be a color, or a color plus a percentage.
Code (considering browser compatibility):
Css background gradient-linear gradient
.demo {
Width:500
Height:300
Margin:50pxauto
}
.demo * {
Width:200px
Height:200px
Margin:20px
Text-align:center
Line-height:200px
Color:#fff
Font-size:16px
Float:left
}
.demo1 {
/ * background color * /
Background-color:#fd0d0d
/ * chrome2+,safari4+;multiplecolorstops*/
Background-image:-webkit-gradient (linear,leftbottom,lefttop,color-stop (0.32), color-stop (0.66), color-stop (0.83))
/ * chrome10+,safari5.1+*/
Background-image:-webkit-linear-gradient (# fd0d0d,#d89e3c,#97bb51)
/ * firefox;multiplecolorstops*/
Background-image:-moz-linear-gradient (top,#fd0d0d,#d89e3c,#97bb51)
/ * ie6+*/
Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#fd0d0d',endColorstr='#d89e3c')
/ * ie8+*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr='#fd0d0d',endColorstr='#d89e3c')"
/ * ie10*/
Background-image:-ms-linear-gradient (# fd0d0d,#d89e3c,#97bb51)
/ * opera11.1*/
Background-image:-o-linear-gradient (# fd0d0d,#d89e3c,#97bb51)
/ * Standard writing * /
Background-image:linear-gradient (# fd0d0d,#d89e3c,#97bb51)
}
.demo2 {
/ * background color * /
Background-color:#d41a1a
/ * chrome2+,safari4+;multiplecolorstops*/
Background-image:-webkit-gradient (linear,leftbottom,righttop,color-stop (0.32), color-stop (0.66), color-stop (5c7c99)
/ * chrome10+,safari5.1+*/
Background-image:-webkit-linear-gradient (45degrection, d41a1a, 5c7c99)
/ * firefox;multiplecolorstops*/
Background-image:-moz-linear-gradient (45degrection, d41a1a, 5c7c99)
/ * ie10*/
Background-image:-ms-linear-gradient (45degregency41a1a0% record9e60c100%)
/ * opera11.1*/
Background-image:-o-linear-gradient (45degthand d41a1a, d9e60c)
/ * Standard writing * /
Background-image:linear-gradient (45degthand d41a1a, d9e60c)
}
Basic linear gradient-from top to bottom
Basic linear gradient-45 degree angle
This is the end of this article on "how to use css to achieve gradient effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
