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

Editor to share with you the example analysis of linear gradient linear-gradient attributes in CSS, I believe that 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 go to know it!

The syntax of linear-gradient ():

= linear-gradient ([[| to],]? [,] +)

= [left | right] | | [top | bottom]

= [|]?

Value of linear-gradient ():

The following values are used to indicate the direction of the gradient, which can be set using an angle or keyword:

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

Toleft: sets the gradient from right to left. Equivalent to: 270deg

Toright: sets the gradient from left to right. Equivalent to: 90deg

Totop: sets the gradient from bottom to top. Equivalent to: 0deg

Tobottom: sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving blank.

Used to specify the start and end color of the gradient:

Specifies the color

Specify the start and stop color position with a length value Negative values are not allowed

Specify the start and stop color position as a percentage

Note: in order to create a linear gradient, you need to set a starting point and a direction (specified as an angle) of the gradient effect. You also have to define the stop color. The stop color is the transition you want Gecko to smooth, and you have to specify at least two, and of course you can specify more colors to create more complex gradients.

Browser compatibility of linear-gradient ()

Browser .jpg

Examples of the usage of linear-gradient ()

HTML section:

CSS section:

# box {

Height:200px

Width:300px

Background:-webkit-linear-gradient (right,red,yellow); / * Safari5.1-6.0 /

Background:-o-linear-gradient (right,red,yellow); / * Opera11.1-12.0 percent /

Background:-moz-linear-gradient (right,red,yellow); / * Firefox3.6-150s /

Background:linear-gradient (toright,red,yellow); / * Standard syntax (must be placed last) * /

}

The above is all the content of the article "sample Analysis of linear-gradient attributes of Linear gradient in CSS". 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.