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

This article mainly introduces css3 how to achieve the element color from left to right blue effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

In css, you can use the background attribute and the "linear-gradient ()" function to achieve the effect of turning the element blue from left to right. You only need to add the "background:linear-gradient (to right,white,blue)" style to the element.

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

In css, you can use the background attribute and the linear-gradient () function to change the color from left to right.

The background property is used to style the background of the element, and the linear-gradient () function is used to set the linear gradient of the element and 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.

Let's take a look at this through an example:

123 # grad1 {height: 200px; background: linear-gradient (to right, white, blue);} Linear gradient-from left to right

A linear gradient starting from the left. The starting point is white and slowly transition to blue:

Output result:

Thank you for reading this article carefully. I hope the article "how to achieve the effect of element color turning blue from left to right" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.