How to use the gradient attribute in CSS3 to create a background gradient effect

This article will share about the effect of CSS3 background gradient. It has certain reference value and I hope it will be helpful to everyone.

Background gradient is a good special effect , so how to use CSS3 to achieve this effect? ​​Today I will share with you CSS3 gradients. CSS3 gradients are a new type of image added to the image module. CSS3 gradients allow smooth transitions to be displayed between two or more specified colors.

The browser supports two types of gradients:

linear, defined with the linear-gradient() function,

radial, defined with radial-gradient () Function definition.

Pay attention to browser compatibility issues during use

Safari, Chrome:-webkit-linear-gradient

Firefox:-moz- linear-gradient

IE:-ms-linear-gradient

Opera:-o-linear-gradient

This article will Take the Chrome browser as an example to explain

Linear Gradient

To create a linear gradient, set the starting point and direction to angles, Also to define color stops you must specify at least two stop colors.

Linear gradient from top to bottom

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

Gradient process from left to right

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

##Linear gradient (even pauses)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

Radial Gradient

The radial gradient is defined by its center. At least two color nodes must be defined. You can also specify the center, shape (circle or ellipse), and size of the gradient. By default, the center of the gradient is center (indicated in center point), the shape of the gradient is ellipse (representing an ellipse), and the size of the gradient is farthest-corner (representing the farthest corner).

Centered radial gradient

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

##Custom radial gradient

closest-side: closest-corner: closest corner

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

Summary: The above is all the content of this article. I hope this article will help everyone learn gradients.

The above is the detailed content of How to use the gradient attribute in CSS3 to create a background gradient effect. For more information, please follow other related articles on the PHP Chinese website!