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

This article mainly shows you "how to use the linear gradient of css technology to design rainbows", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use the linear gradient of css technology to design rainbows" this article.

In web page design, gradient effects are sometimes needed, and gradients can create visual patterns similar to rainbows. Before CSS3, you need to make a special picture in order to show a gradient, which is not only inflexible but also increases the number of requests, while CSS3 can easily achieve page gradient effects, which are used to do gradient background, gradient navigation, special effects with CSS3 animation, etc. In CSS3, Gradient (gradient) is divided into linear-gradient (linear gradient) and radial-gradient (radial gradient). The syntax for linear gradients of CSS colors is implemented slightly differently in different browsers, but in the end it is uniform:

Syntax of linear gradient of CSS color

Background-image:linear-gradient (| |,]?, [,] *)

The first parameter is the starting point or angle of the gradient. The second parameter is a color stop point (color stops). You need at least two colors (start and end), and you can add any color to increase the richness of the color gradient. The definition of a color stop can be a color, or a color plus a percentage:

/ * color-stop (percentage/amount,color) * / color-stop (0.20 percentage/amount,color)

Because CSS gradual discoloration (Gradients) technology is a relatively new technology in CSS3, belonging to advanced CSS functions, so each browser has added some features to the implementation of this technology.

Let's make a rainbow:

/ * example3-linearrainbow*/#example3 {/ * fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient (linear,leftbottom,lefttop,color-stop (0.20), color-stop (0.40), color-stop (0.6), color-stop (0.8), color-stop (1)); / * chrome10+,safari5.1+*/background-image:-webkit-linear-gradient (red,green,blue,purple,orange) / * firefox;multiplecolorstops*/background-image:-moz-linear-gradient (top,red,green,blue,purple,orange); / * ie10*/background-image:-ms-linear-gradient (red,green,blue,purple,orange); / * opera11.1*/background-image:-o-linear-gradient (red,green,blue,purple,orange); / * The "standard" * / background-image:linear-gradient (red,green,blue,purple,orange);}

Some explanation about IE's support for CSS color gradients: in the early days of IE, filter and-ms-filter syntax were used to achieve color gradients, but in the latest version of IE, the-ms-linear-gradient syntax was changed. We can use conditional judgment statements in CSS to solve this problem:

The above is all the content of the article "how to use the linear gradient of css technology to design rainbows". 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.