Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Linear gradient of CSS3 (linear-gradient)

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Network Security >

Share

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

Take webkit kernel browser as an example

Syntax:

Div {width:200px; height:200px; background:-webkit-linear-gradient (left,#F39,#09C);}

As shown in the figure:

Parameters:

-webkit-linear-gradient is the webkit engine's implementation parameter for gradients. The first parameter controls the direction of the gradient, such as left (from left to right) right (from right to left). The second and third parameters are the color from beginning to end, respectively.

The start and end color is along the gradient line and will contain points of the specified color at the specified location (set as a percentage or length). The number of starts and stops of color is infinite. If you use a percentage position, 0% represents the starting point and 100% is the end point, but values outside the area can be used to achieve the desired results. This is also a key to making gradients through CSS3 Gradient, which directly affects your design effect, like our examples here are not perfect effects, just to show you a gradient effect, we first use it. Let's go on to look at examples of different starting colors:

Div {width:200px; height:200px; background:-webkit-linear-gradient (left,#F39 90% meme 09C);}

As shown in the picture

You are welcome to discuss the usage in more detail.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Network Security

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report