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

Editor to share with you how css3 set the background to gradually change color, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Setting method: 1, use "background:linear-gradient (gradient direction, color 1, color 2);" statement; 2, use "background:radial-gradient (shape size position, start color,.., end color);" statement.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Gradient Gradient

A CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors. Compared to using gradient images, gradients reduces download time and broadband use, and looks better when zoomed in.

Linear gradient

The color values gradually transition along an implicit straight line. Generated by linear-gradient ().

To create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can set a starting point and a direction (or an angle).

/ * the gradient axis is 45 degrees, from blue to red * / linear-gradient (45deg, blue, red); / * from bottom right to top left, from blue to red * / linear-gradient (to left top, blue, red); / * from bottom to top, starting with blue, starting with green gradient at 40% height, and ending with red * / linear-gradient (0deg, blue, green 40%, red)

Grammar

Linear-gradient ([| to,]?)

Specifies the direction (or angle) of the gradient with an angle value. The angle increases clockwise.

Describes the location of the starting point of the gradient The values of to top, to bottom, to left and to right are converted to angles of 0,180,270 and 90 degrees. The remaining values are converted to an angle that rotates clockwise starting toward the center of the top. The end point of a gradient is symmetrical to the center of its starting point.

A list of color changes. Support for transparency (rgba (255p0re0pl 0pl 0.1)).

Example: background color linear gradient-background-image+linear-gradient ()

Css background gradient-linear gradient. Demo {width:500; height: 300; margin: 50px auto } .demo * {width: 200px; height: 200px; margin: 20px; text-align: center Line-height: 200px; color: # fff; font-size: 16px; float: left } .demo1 {/ * background * / background-color: # fd0d0d; / * chrome 2 colors, safari 4 + Multiple color stops * / background-image:-webkit-gradient (linear, left bottom, left top, color-stop (0.32, # fd0d0d), color-stop (0.66, # d89e3c), color-stop (0.83, # 97bb51) / * chrome 10, safari 5.1 + * / background-image:-webkit-linear-gradient (# fd0d0d, # d89e3c, # 97bb51); / * firefox Multiple color stops * / background-image:-moz-linear-gradient (top,#fd0d0d, # d89e3c, # 97bb51); / * ie 6 + * / 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) / * opera 11.1 * / background-image:-o-linear-gradient (# fd0d0d, # d89e3c, # 97bb51); / * Standard Writing * / background-image: linear-gradient (# fd0d0d, # d89e3c, # 97bb51) } .demo2 {/ * background * / background-color:#d41a1a; / * chrome 2 colors, safari 4 + Multiple color stops * / background-image:-webkit-gradient (linear, left bottom, right top, color-stop (0.32, # d41a1a), color-stop (0.66, # d9e60c), color-stop (0.83, # 5c7c99) / * chrome 10, safari 5.1 + * / background-image:-webkit-linear-gradient (45deg, # d41a1a, # d9e60c, # 5c7c99); / * firefox Multiple color stops * / background-image:-moz-linear-gradient (45deg, # d41a1a, # d9e60c, # 5c7c99); / * ie10 * / background-image:- ms-linear-gradient (45deg, # d41a1a 0%, # d9e60c 100%) / * opera 11.1 * / background-image:-o-linear-gradient (45deg, # d41a1a, # d9e60c); / * Standard Writing * / background-image: linear-gradient (45deg, # d41a1a, # d9e60c) } basic linear gradient-- top-down basic linear gradient-- 45 degree angle

Radial gradient

The radial-gradient () CSS function creates an image whose color values spread outward from a center point (origin) and gradually transition to other color values.

You also need to define at least two color nodes, and you can also specify the center of the gradient (default at the center point, center), shape (default oval ellipse), and size (default farthest-corner, representing the farthest corner)

Grammar

Radial-gradient ([shape size at position]? [,] +)

Shape: Oval (ellipse, default) or circular (circle)

Size:

Closest-side, the edge shape of the gradient is tangent to the side of the container closest to the center of the gradient (circle) or at least to the vertical and horizontal edges closest to the center of the gradient (ellipse).

Closest-corner, the edge shape of the gradient intersects the nearest corner of the container to the center of the gradient.

Farthest-side, in contrast to closest-side, the edge shape is tangent to the furthest side of the container from the center of the gradient (or the furthest vertical and horizontal edges).

Farthest-corner, the edge shape of the gradient intersects the farthest corner of the container from the center of the gradient.

Position: can be specific two position offset values (20%) or keywords (left, right, top, bottom)

Example: background color radial gradient-background-image+radial-gradient ()

Css background gradient-Radial gradient. Demo {width:500px; height:200px; margin: 50px auto } .demo * {width:200px; height:200px; margin: 50px 15px; float: left } .demo1 {background-image:-moz-radial-gradient (# ecff05, red); background-image:-webkit-gradient (radial, center center, 0, center center, 220, from (# ecff05), to (red)) / * old * / background-image:-webkit-radial-gradient (# ecff05, red); / * new syntax * / background-image: radial-gradient (# ecff05, red) } .demo2 {background-image:-moz-radial-gradient (45px 45px 45deg, circle cover, # ecff05 0%, orange 100%, red 95%); background-image:-webkit-radial-gradient (45px 45px, circle cover, # ecff05, red) Background-image: radial-gradient (45px 45px 45deg, circle cover, # ecff05 0%, orange 100%, red 95%);}

Repeat gradient

Repeat the gradient pattern several times until it is enough to fill the specified element. Generated by the repeating-linear-gradient () and repeating-radial-gradient () functions.

The parameter of the repeating function is the same as above, except that it is repeated in multiples based on the gradient length (the distance between the last color stop and the first).

Css background gradient-repeat gradient. Demo {width:500px; height:200px; margin: 50px auto } .demo * {width:200px; height:200px; margin: 50px 15px; float: left } .demo1 {background: repeating-linear-gradient (to top left, lightpink, lightpink 5px) White 5px, white 10px) } .demo2 {background: repeating-radial-gradient (powderblue, powderblue 8px, white 8px White 16px) }

The above is all the content of the article "how to set the background to gradual discoloration in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.