How to set gradient in css

Method: 1. Use linear-gradient() to implement linear gradient, the syntax is "linear-gradient (angle, starting and ending color list)"; 2. Use radial-gradient() to implement radial gradient, the syntax is "radial -gradient (size position, starting and ending colors)".

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

linear-gradient() function--linear gradient

linear-gradient() function is used to create an "image" of a linear gradient .

To create a linear gradient, you need to specify two colors. You can also achieve gradient effects in different directions (specified as an angle). If the direction is not specified, the gradient will default from top to bottom.

Syntax:

linear-gradient(direction, color-stop1, color-stop2, ...);

Parameters:

Code example (consider browser compatibility):

      
  
 
基本线性渐变--自上而下
 
基本线性渐变--45度角
 
  

Rendering:

radial-gradient() function--radial gradient

radial-gradient() function is created with radial gradient" image".

The radial gradient is defined by the center point. Example:

To create a radial gradient you must set two stop colors.

css Radial color gradients (Radial Gradients) are different from linear gradients (linear gradients). It does not gradient along one direction, but takes a point as the center and radiates gradients around 360 degrees.

Syntax:

radial-gradient(shape size at position, start-color, ..., last-color);

Parameter value:

Example:

     
  
径向渐变 - 形状
 
椭圆形 Ellipse（默认）：
 
 
圆形 Circle：
 
 
注意： Internet Explorer 9 及之前的版本不支持渐变。
  

Rendering:

      
  
 
径向渐变
 
径向渐变
 
  

(Learning video sharing:css video tutorial)

The above is the detailed content of How to set gradient in css. For more information, please follow other related articles on the PHP Chinese website!