CSS3 team-attack border-radius, css3border-radius

CSS3 team-attack border-radius, css3border-radius
Previous Article: Small solution to CSS float Attributes -- "float"

~~ Strong insertion ~~ If you want to learn more about the float attribute, you can click the link above and the article "CSS float attribute small solution --" float "is born if water" adds a lot of ideas, I used an example to discuss whether float has exceeded the Document Stream. This may bring unexpected gains ~~~~~~

Next, let's start with the question.

When CSS3 came to us, we saw a simpler and more dazzling html world. If CSS3 is fully prevalent and multiple mainstream browsers are compatible with each CSS 3 attribute, whether it is for front-end developers or for us sitting in front of the browser to browse the webpage, it would be a wonderful thing. At that time, it was "the old age of Wang Xie Tang, Qian Yan, flying into ordinary homes ".

For the attacking CSS3 team, let's unveil them one by one. The first entry is border-radius.

I. CSS2 code to generate rounded corners

In webpage design, the rounded corner can be used to beautify the area. In css2, there are many methods if we want to create a rounded corner, but they are relatively complicated. For example, a rounded corner image can be used most conveniently, but http requests will be added, so the user experience is slightly poor and there is no pure code for quick access; if you use code, you can use the thought of multiple elements stacked to "heap" a rounded corner, but the code is too much, so it is annoying to look at it. Of course, there are other methods that can be used by our friends, but there should be no direct border-radius.

Whether it's a battle or not, it's necessary to know yourself and know yourself, so we should first use the CSS2 code to generate a rounded corner to see the effect:

 

The idea is to overlay multiple divs to get the effect of rounded corners.The sequence of the above two angles is the opposite to that of the div class of the following two angles. The main div is used to determine the area size. The Code is as follows:

HTML Markup

<! -- Upper left/upper right --> <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 class =" box "> <! -- Subject part --> </div> <! -- Lower left/lower 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>View Code

CSS Code

<! -- Upper left/upper right --> <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 class =" box "> <! -- Subject part --> </div> <! -- Lower left/lower 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>View Code

Let's take a closer look at the effect:

 

The exposed items are all exposed... After the zoom-in, all the edges and corners of the eight divs are displayed. Maybe few people may zoom in several times when browsing the Web page, but this is at least a problem.

The above shows the rounded corner effect by using CSS2. The code is obviously repeated and there are many codes. After the code is enlarged, edges and corners will appear. If you want to use the same idea to generate a rounded corner with a larger radius and a more rounded corner, you need to add more labels and repeat more code, this is not what we want to see.

2. border-radius attacked by CSS3

The border-radius added in CSS3 solves the above problems and brings us great convenience. First, let's look at its syntax:

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

Border-radius is a short attribute used to set the border-*-radius attribute. The value can be a numerical value or a percentage, the four values are set clockwise from the top-left, top-right, bottom-right, and bottom-left values.We will discuss it in eight cases.

1. border-radius: 20px. There is only one value after the attribute. the radius of the top-left, top-right, bottom-right, and bottom-left rounded corners are equal. The effect is as follows:

 

2. border-radius: 20px 40px. There are two values after the attribute, that is, top-left and bottom-right take the first value, top-right and bottom-left take the second value, that is, the diagonal value. The effect is as follows:

 

3. border-radius: 20px 30px 40px. There are three values in the attribute, that is, top-left takes the first value, top-right and bottom-left takes the second value, the third value of bottom-right is actually set clockwise from the top-left, top-right, bottom-right, and bottom-left, under normal circumstances, the value of top-right and bottom-left are equal, so the third value is bottom-right. The effect is as follows:

 

4. border-radius: 20px 30px 40px 50px; the attribute has four values, set the value in the order of top-left, top-right, bottom-right, and bottom-left clockwise from the top. The effect is as follows:

 

The above are the four basic values, and the other four value forms are listed next. The following four forms are actually no different from the above four forms, you only set different horizontal and vertical radius:

5. border-radius: horizontal radius/vertical radius, that is, border-radius: 20px/40px; that is, the four rounded corners are taken with the same horizontal radius and vertical radius, which are actually 1 of the deformation, the effect is as follows:

 

6. border-radius: horizontal radius 1 horizontal radius 2/vertical radius 1 vertical radius 2, that is, border-radius: 20px 30px/40px 50px; that is, top-left and bottom-right take the horizontal radius 1 and the vertical radius 1, top-right and bottom-left take the horizontal radius 2 and the vertical radius 2, which actually belong to the deformation of 2, 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, that is, border-radius: 20px 30px 40px/50px 60px 70px; that is, top-left takes the horizontal radius 1 and the vertical radius 1, top-right and bottom-left take the horizontal radius 2 and the vertical radius 2, bottom-right takes the horizontal radius 3 and the vertical radius 3, which is actually 3 of the 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, that is, border-radius: 20px 30px 40px 50px/60px 70px 80px 90px; that is, the values are clockwise in turn, which is actually 4 deformation, the effect is as follows:

 

Of course,In addition to pixels and other units, the percent number can also be used as the unit,Don't forget ~~~~~~~~~

Let's take a look at the magnified effect:

 

After the image is enlarged, the rounded corner is still pixel-level, and the whole world is round.

Of course,Border-radius can also be separated and written:

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

PS:For older browsers, do not forget to add the hateful browser prefix-moz-/-webkit-.

3. What can this product do?

What border-radius can do is to cook food. Different chefs have different ideas, different crafts, and different dishes.

There are such dishes:

 

There are also such dishes:

 

There are also such elliptical dishes:

 

Or you can have a round pie and so on:

 

As shown in,Border-radius provides great convenience for us to generate an ellipse and a circle, as well as more possibilities for us to generate more patterns.

4. Remove a knot

With other attributes, border-radius can provide a lot of elegant effects. Border-radius has come to an end. We hope it can help our friends who need it. We also welcome to discuss new ideas and questions. If there is something wrong with it, I would like to criticize and correct it.

~~ Strong insertion again ~~ If you want to learn more about the float attribute, you can click the link below. The article "CSS float attribute small solution-" float "is born with water" adds a lot of ideas, I used an example to discuss whether float has exceeded the Document Stream. This may bring unexpected gains ~~~~~~

 

Previous Article: Small solution to CSS float Attributes -- "float"