Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve up and down gradient css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In css, you can use the background property and the linear-gradint () function to achieve the effect of a gradient up and down, with the syntax of "background:linear-gradient (to bottom, top color, bottom color);".

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

1. Create a new html file, named test.html, to explain how to achieve top-down gradient in css. Use the div tag to create a module for testing. Add a class attribute to the div tag and set it to mytest.

Within the css tag, define the style of the div through class, setting its width to 400px and height to 200px.

2. Within the css tag, through the background attribute, using linear-gradient, and using to bottom to realize the gradient from red to yellow from top to bottom.

The linear-gradient () function is used to create a picture that represents a linear gradient of two or more colors.

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

The syntax is:

Linear-gradient (direction, color-stop1, color-stop2,...)

What needs to be noted is that

Direction means to specify the direction (or angle) of the gradient with an angle value, color-stop1, color-stop2,... Lets you specify the start and end color of the gradient.

Open the test.html file in the browser to see the effect of the implementation.

The above is all the contents of the article "how to realize the css of up and down gradients". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.