What are the ways of css3 gradient

In this article, the editor introduces in detail "what are the ways of css3 gradient", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the ways of css3 gradient" can help you solve your doubts? let's follow the editor's way of thinking to learn new knowledge.

There are two kinds of css3 gradients: 1, linear-gradient () function to create a linear gradient, change the color along an axis, from the beginning to the end of the color gradient in order; 2, radial-gradient () function to create a radial gradient, from the start to the end of the color from the inside to the outside of the circular gradient.

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

There are two ways of gradual change:

Linear gradient (Linear Gradients): changes the color along an axis and gradients sequentially from the start point to the end point.

Background:linear-gradient (direction,color-stop1,color-stop2, …)

Radial gradient (Radial Gradients): a circular gradient from the inside to the outer edge of the color from the start to the end.

Background:radial-gradient (center,shape size,start-color,... , last-color)

Sample code:

# grad1 {width: 200px; height: 200px; / * background-image: linear-gradient (# b7ffb5, # a880ff); * / / * background-image: linear-gradient (to right, # b7ffb5, # a880ff); * / * background-image: linear-gradient (to bottom right, # b7ffb5, # a880ff) * / background-image: radial-gradient (# 7af0ff, # 892aff);}

Effect picture:

1. Upper and lower linear gradient

two。 Left and right linear gradient

3. Diagonal linear gradient

4. Radial gradient

Read here, this "what are the ways of css3 gradient" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.