CSS3 squad-Attack on Border-radius

Previous: "CSS float property Pee-" floating "raw water"

When CSS3 came to us, we saw an HTML world that was easier to manipulate and more dazzling. If the CSS3 is fully prevalent, when multiple mainstream browsers start to compatible with a CSS3 attribute, then whether it is for the front-end developers, or to sit in front of the browser to browse the Web page, we will be a very wonderful thing, then is "Old Wang Xie Tang ago, fly into the ordinary people's home."

For the attack on the CSS3 squad, let us open their ornate veil in turn. The first one to appear is Border-radius.

First, CSS2 code to generate rounded corners

In the web design, the fillet can be used to beautify the area, in the CSS2, if we want to make a fillet, there are many methods, but are relatively complex. For example, the most convenient to use a rounded picture, but will increase the HTTP request, the user experience is slightly worse, no pure code to quickly, with the code can be stacked with multiple elements of the idea to "heap" out a round corner, but the code is more, look at the annoying. Of course there are other ways that small partners can play the odd idea, but there should be absolutely no border-radius coming straight.

Whether it is not baizhanbudai, the enemy or is very necessary, so first use CSS2 code to create rounded angle to see the effect:

The idea is to use multiple div overlays to get rounded corners. the Div class in the top two corners and the two corners below is in the opposite order, and the body Div determines the size of the area.

HTML Markup

<!--Upper left corner/upper right corner -<Divclass= "R_top"><Divclass= "R_a"></Div><Divclass= "R_b"></Div><Divclass= "R_c"></Div><Divclass= "R_d"></Div><Divclass= "R_e"></Div><Divclass= "R_f"></Div><Divclass= "R_g"></Div><Divclass= "R_h"></Div></Div><Divclass= "box"><!--Body Part -</Div><!--Lower left/lower right corner -<Divclass= "R_bottom"><Divclass= "R_h"></Div><Divclass= "R_g"></Div><Divclass= "R_f"></Div><Divclass= "R_e"></Div><Divclass= "R_d"></Div><Divclass= "R_c"></Div><Divclass= "R_b"></Div><Divclass= "R_a"></Div></Div>

View Code

CSS Code

<!--upper Left/upper right corner--><div class= "r_top" ><div class= "r_a" ></div><div class= "R_b" ></div ><div class= "R_c" ></div><div class= "r_d" ></div><div class= "R_e" ></div>< Div class= "r_f" ></div><div class= "R_g" ></div><div class= "R_h" ></div></div> <div class= "box" ><!--main part--></div><!--lower left/right corner--><div class= "R_bottom" ><div class = "R_h" ></div><div class= "R_g" ></div><div class= "r_f" ></div><div class= "R_e" ></div><div class= "R_d" ></div><div class= "r_c" ></div><div class= "R_b" >< /div><div class= "R_a" ></div></div>

View Code

Let's zoom in and look at the effect:

The exposure has been exposed ...

The above is CSS2 made out of the fillet effect, obvious code duplication, the code is numerous. If you want to use the same idea to create a fillet with a larger fillet radius, and want the rounded corners to be more rounded, then you need to add more labels, more repetitive code, which is not what we want to see.

Second, CSS3 attack on the Border-radius

The CSS3 added to the Border-radius really brought us great convenience. First look at its syntax:

Border-radius:none | <length> {1,4} [/<length>{1,4} ]?

Border-radius is a shorthand attribute used to set the properties of Border-*-radius, values can go to a value, or a percentage, four values are according to Top-left, Top-right, Bottom-right, The order of the Bottom-left is set clockwise from the beginning. The following are discussed in eight different situations.

1, border-radius:20px; there is only one value after the attribute, then the Top-left, Top-right, Bottom-right, and bottom-left fillet radii are equal, the effect is as follows:

2, border-radius:20px 40px; After the property has two values, that is, Top-left and Bottom-right take the first value, Top-right and Bottom-left take the second value, that is, diagonal value, the effect is as follows:

3, border-radius:20px 30px 40px; After the property has three values, that is top-left take the first value, Top-right and Bottom-left take the second value, Bottom-right take the third value, In fact, according to the order of Top-left, Top-right, Bottom-right, Bottom-left, from the beginning of the clockwise to set, because normally top-right and bottom-left values equal, So the third value is naturally bottom-right, and the effect is as follows:

4, border-radius:20px 30px 40px 50px; After the property has four values, then according to Top-left, Top-right, Bottom-right, bottom-left order from the beginning of the clockwise to set, and then to value, The effect is as follows:

The above is the basic four kinds of values, followed by a list of four other types of values, the following four forms are actually not the same as the above four forms, but set a different horizontal radius and vertical radius only:

5, Border-radius: Horizontal radius/Vertical radius, that is border-radius:20px/40px, that is, four fillets are taken with a horizontal radius and vertical radius, in fact, 1 of the deformation, the effect is as follows:

6. Border-radius: Horizontal radius 1 Horizontal Radius 2/Vertical radius 1 vertical radius 2, i.e. border-radius:20px 30px/40px 50px, i.e. top-left and bottom-right take horizontal radius 1 and vertical radius 1, Top-right and Bottom-left take the horizontal radius of 2 and the vertical radius of 2, in fact, belong to 2 deformation, the effect is as follows:

7, Border-radius: Horizontal radius 1 Horizontal Radius 2 horizontal Radius 3/Vertical radius 1 Vertical Radius 2 vertical radius 3, i.e. border-radius:20px 30px 40px/50px 60px 70px; that is, top-left take horizontal radius 1 and vertical radius 1 , Top-right and Bottom-left take the horizontal radius 2 and the vertical radius 2,bottom-right take the horizontal radius 3 and the vertical radius 3, actually belongs to 3 deformation, the effect is as follows:

8, Border-radius: Horizontal radius 1 Horizontal Radius 2 Horizontal Radius 3 Horizontal RADIUS 4/Vertical radius 1 Vertical Radius 2 Vertical Radius 3 vertical radius 4, i.e. border-radius:20px 30px 40px 50px/60px 70px 80px 90px; The needle to take the value, actually belongs to 4 of the deformation, the effect is as follows:

Of course, in addition to pixels and other units, you can also use percent as units, do not forget Oh ~~~~~~~~~

Let's zoom in to see:

After zooming in, the rounded corners are still pixel-level and suddenly feel the whole world is rounded up.

Of course,Border-radius can also be opened to write :

Border-top-left-radius: <length>  <length>   //upper left corner Border-top-right-radius: <length>  <length>  //upper right corner border-bottom-right-radius:<length>  <length>  // Lower right corner border-bottom-left-radius:<length>  <length>   //lower left corner

PS: for older browsers please do not forget to add the Hateful browser prefix-moz-/-webkit-.

Third, what can this goods do?

Border-radius can do is cook cooking problems, not the same chef has different ideas, there are different crafts, cooked dishes are also different.

There are such dishes:

There are also such dishes:

There are also such oval dishes:

Or a round pie, and so on:

As shown,Border-radius provides a great convenience for us to generate ellipses and circles, as well as more possibilities for us to generate more patterns.

Four, a small knot

About Border-radius to this point, I hope to bring help to the needs of friends, there are new ideas and questions are welcome to discuss, there is a wrong place to ask for criticism.

Previous: "CSS float property Pee-" floating "raw water"

CSS3 squad-Attack on Border-radius