In-depth understanding of the linear-gradient property in CSS

With the development of the Internet, people not only have high requirements for the functions of web pages, but also have higher and higher requirements for the appearance of the pages. For example, the page color no longer uses a single color, but uses a variety of color mixtures to make the page more beautiful. More beautiful, thereby attracting more users. This article will share with you how to use the CSS linear gradient linear-gradient() function, including linear-gradient() attributes, linear-gradient() angles, linear-gradient() directions, etc. Friends in need can refer to it, I hope it is useful to you.

The syntax of linear-gradient():

= linear-gradient([ [ | to ] ,]? [, ] )
= [left | right] || [top | bottom]
= [ | ]?

Value of linear-gradient():

The following values ​​are used to represent the direction of the gradient, which can be set using angles or keywords:
: Use angle values ​​to specify the direction (or angle) of the gradient.
to left: Set the gradient from right to left. Equivalent to: 270deg
to right: Set the gradient from left to right. Equivalent to: 90deg
to top: Set the gradient from bottom to top. Equivalent to: 0deg
to bottom: Set the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.

: Used to specify the starting and ending colors of the gradient:
: Specify the color.
: Use the length value to specify the starting and ending color positions. Negative values ​​are not allowed
: Use percentage to specify the starting and ending color positions.

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 need to define the end color. The stop color is the smooth transition you want Gecko to make, and you must specify at least two, although you can specify more colors to create more complex gradient effects.

Browser compatibility of linear-gradient()

##Usage examples of linear-gradient()

HTML part:

<div id="box"></div>

CSS part:

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

Rendering:

##As shown in the picture, The example is a linear gradient from red to yellow, from left to right. When writing, pay attention to browser compatibility issues and grammatical rules. This article mainly introduces the linear gradient in CSS. Gradient is divided into linear gradient and radial gradient. The next article will share the radial gradient with you. Friends who like it can follow me!

The above is the detailed content of In-depth understanding of the linear-gradient property in CSS. For more information, please follow other related articles on the PHP Chinese website!