Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.