CSS3 radial gradient (radial-gradient)_html/css_WEB-ITnose

The previous article introduced CSS3 linear gradient (linear-gradient). This article introduces radial-gradient (radial gradient) and repeating gradient (linear repeat, radial repeat). In the past, gradient effects, like shadows and rounded corner effects, were all made into pictures. Now CSS3 can be implemented directly by writing CSS code.

CSS3 radial gradients and linear gradients are very similar. Let’s first look at their syntax:

. Code

1. -moz-radial-gradient([ || ,]? [ || ,]? , ]*);
2. -webkit-radial-gradient([ || ,]? [ || < ;size>,]? , [, ]*);

except Instead of the starting position, direction, and color you've seen in linear gradients, radial gradients allow you to specify the shape (circle or ellipse) and size (nearest end, closest corner, farthest end, farthest corner) of the gradient. , contain or cover (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)). Color stops: Just like with a linear gradient, you should define the starting and ending colors of the gradient along the gradient line. In order to better understand its specific usage, we mainly compare the specific usage of CSS3 radial gradient through different examples. Share a best-used UI front-end framework!

Example 1:

. Code

1. background: -moz-radial-gradient( #ace, #f96, #1E90FF);
2. background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

Effect:

Example 2:

. Code

1. background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
2. background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
From the codes of the above two examples, we found that they start and end with the same idea, but the second example locates some data. Why is there such a big difference? In fact, although the radial gradient has the same starting and ending colors, when the position is not set, the default colors are evenly spaced. This is the same as our previous linear gradient, but if the gradient position is set, it will follow the gradient position. Gradient, this is the difference between our example one and example: although the circles have the same starting and ending colors, in example one the default color is an evenly spaced gradient, while in example two each color has a specific position. Share one of the best UI front-end frameworks!

Example 3:

. Code

background: -moz-radial-gradient( bottom left, circle, #ace, #f96, #1E90FF);

background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

The effect is as follows:

Example 4:

.code

background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

background : -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

The effect is as follows:
We can see from the effects of Example 3 and Example 4 that their shapes are different, the example is a three-way circle and the example is a four-way elliptical shape, that is to say, they exist in shape. difference. However, when we return to the code of the two examples, it is obvious that in example three, the shape is set to circle, and in example four, ellipse, in other words, in the radial gradient, we can set its shape.

Example 5:

. Code

1. background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
2. background: -webkit-radial- gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

The effect is as follows :

Example 6:

. Code

1. background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
2. background: -webkit-radial-gradient(ellipse farthest-corner, # ace, #f96 10%, #1E90FF 50%, #f96); 🎜>
We can clearly see from the code in Example 5 and Example 6 that in Example 5 we used closest-side and in Example 6 we used farthest-corner. This way we know that in the radial gradient we can also set the size (Size) for it: the different options for size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover) point to the ones used to define A point the size of a circle or ellipse. Example: Near side vs far corner of ellipse The two ellipses below have different sizes. Example 5 is determined by the distance from the starting point (center) to the near edge, while Example 6 is determined by the distance from the starting point to the far corner. Share one of the best UI front-end frameworks!

Example 7:

. Code

background: -moz-radial-gradient( circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96); >Example 8:

The effect is as follows:

1. Example 7 and 8 mainly demonstrate the near side VS far side of the circle. The gradient size of the circle in Example 7 is determined by the distance from the starting point (center) to the near side, while the circle in Example 8 is determined by the distance from the starting point to the far side.
Example 9:

. Code

background: -moz-radial-gradient( #ace, #f96, #1E90FF);

background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

The effect is as follows:

Example 10:

. Code

background: -moz-radial-gradient(contain, #ace, #f96, #1E90FF);

1. background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF) ;

The effect is as follows:

Example nine and ten demonstrate the containing circle. Here you can see the default circle of example nine, a gradient version of the same, but enclosed by the circle of example ten. Share one of the best UI front-end frameworks! Finally, we are looking at two examples. One is the application of center positioning and full sized, as shown below:

. Code

1. /* Firefox 3.6 */
2. background: -moz-radial-gradient(circle, #ace, #f96);

/* Safari 4-5, Chrome 1- 9 */

/* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from( #ace), to(#f96));

/* Safari 5.1 , Chrome 10 */

background: -webkit-radial-gradient(circle, #ace, #f96);

The effect is as follows:

The following example applies Positioned, Sized, please see the code and effect:

2. .code
3. 1. /* Firefox 3.6 */
   2. /* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
   3. background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96);
   4. /* Safari 4-5, Chrome 1-9 */
   5. background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96));
   6. /* Safari 5.1 , Chrome 10 */
   7. background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);

   The effect is as follows:

   At this point we have introduced the two gradient methods of CSS3. To waste a little more time, let’s take a look at the application of CSS3 Repeating Gradient .

   If you want to repeat a gradient, you can use -moz-repeating-linear-gradient (repeating linear gradient) and -moz-repeating-radial-gradient (repeating radial gradient). In the example below, two starting and ending colors are specified for each instance and repeated infinitely. Share one of the best UI front-end frameworks!

   .code

   1. background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
   2. background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
   3. background: -moz-repeating-linear -gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
   4. background: -webkit-repeating-linear-gradient(top left -45deg, #ace, # ace 5px, #f96 5px, #f96 10px);

   Effect:

   Something about CSS3 gradients That’s it. After reading it, everyone will definitely wonder, what are its main uses? There is a lot to say about this. The simplest one is to make a background. We can also use it to make some beautiful buttons, and we can also use it to make patterns. I will list several sample codes for making patterns here:

   HTML code:

   . Code
7. li>
10. 🎜>

CSS code:

.code

1. ul {  
2.   overflow: hidden;  
3.   margin-top: 20px;  
4. }  
5. li{  
6.   width: 150px;  
7.   height: 80px;  
8.   margin-bottom: 10px;  
9.   float: left;  
10.   margin-right: 5px;  
11.   background: #ace;  
12.   /*Controls the size*/  
13.   -webkit-background-size: 20px 20px;  
14.   -moz-background-size: 20px 20px;  
15.   background-size: 20px 20px;  
16. }  
17.                                
18. li.gradient1 {  
19.   background-image: -webkit-gradient(  
20.     linear,  
21.     0 100%, 100% 0,  
22.     color-stop(.25, rgba(255, 255, 255, .2)),  
23.     color-stop(.25, transparent),  
24.     color-stop(.5, transparent),  
25.     color-stop(.5, rgba(255, 255, 255, .2)),  
26.     color-stop(.75, rgba(255, 255, 255, .2)),  
27.     color-stop(.75, transparent),  
28.     to(transparent)  
29.     );  
30.   background-image: -moz-linear-gradient(  
31.     45deg,  
32.     rgba(255, 255, 255, .2) 25%,  
33.     transparent 25%,  
34.     transparent 50%,  
35.     rgba(255, 255, 255, .2) 50%,  
36.     rgba(255, 255, 255, .2) 75%,  
37.     transparent 75%,  
38.     transparent  
39.     );  
40.   background-image: -o-linear-gradient(  
41.     45deg,  
42.     rgba(255, 255, 255, .2) 25%,  
43.     transparent 25%,  
44.     transparent 50%,  
45.     rgba(255, 255, 255, .2) 50%,  
46.     rgba(255, 255, 255, .2) 75%,  
47.     transparent 75%,  
48.     transparent  
49.   );  
50.   background-image: linear-gradient(  
51.     45deg,  
52.     rgba(255, 255, 255, .2) 25%,  
53.     transparent 25%,  
54.     transparent 50%,  
55.     gba(255, 255, 255, .2) 50%,  
56.     rgba(255, 255, 255, .2) 75%,  
57.     transparent 75%,  
58.     transparent  
59.     );  
60. }  
61.                            
62. li.gradient2 {  
63.    background-image: -webkit-gradient(linear, 0 0, 100% 100%,  
64.       color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),  
65.       color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),  
66.       color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  
67.       to(transparent));  
68.    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
69.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
70.       transparent 75%, transparent);  
71.    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
72.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
73.       transparent 75%, transparent);  
74.    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,  
75.       transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,  
76.       transparent 75%, transparent);  
77. }  
78.                                
79. li.gradient3 {  
80.   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  
81.   background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
82.   background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
83.   background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
84. }  
85.                                
86. li.gradient4 {  
87.   background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  
88.   background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
89.   background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
90.   background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  
91. }  
92.                                
93. li.gradient5 {  
94.   background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),  
95.       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),  
96.       -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),  
97.       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));  
98.   background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
99.      -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
100.      -moz-linear-gradient(45deg, transparent 75%, #555 75%),  
101.      -moz-linear-gradient(-45deg, transparent 75%, #555 75%);  
102.   background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
103.      -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
104.      -o-linear-gradient(45deg, transparent 75%, #555 75%),  
105.      -o-linear-gradient(-45deg, transparent 75%, #555 75%);  
106.   background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),  
107.     linear-gradient(-45deg, #555 25%, transparent 25%, transparent),  
108.     linear-gradient(45deg, transparent 75%, #555 75%),  
109.     linear-gradient(-45deg, transparent 75%, #555 75%);  
110. }  
111.                                
112. li.gradient6 {  
113.   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),  
114.      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));  
115.   background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
116.      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
117.   background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
118.      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
119.   background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),  
120.      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  
121. }  

 

　　效果：分享一个最好用的UI前端框架！

　　不错的效果吧，当然感兴趣的朋友可以到这里学习制作更多的不同效果。