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

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

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!