CSS3 Squad-Attack of border-radius_html/css_WEB-ITnose-HTML Tutorial-php.cn

Previous article: "A brief explanation of the CSS float attribute?" "Float is like water"

When CSS3 comes to us through all obstacles, what we see is an operation that is more convenient A simpler, more dazzling html world. If CSS3 becomes fully popular and multiple mainstream browsers begin to be compatible with CSS3 properties, it will be a wonderful thing for both front-end developers and those of us sitting in front of browsers browsing the web. At that time, "in the old days, the kings and swallows in front of the hall flew into the homes of ordinary people."

For the attacking CSS3 squad, let us lift their gorgeous veils one by one. The first one to appear is border-radius.

1. CSS2 code to generate rounded corners

In web design, rounded corners can be used to beautify areas. In CSS2, if we want to make a rounded corner, there are many methods, but they are all relatively complicated. For example, the most convenient way is to use a rounded corner image, but it will increase http requests and the user experience is slightly worse. It is not as fast as pure code. If you use code, you can use the idea of stacking multiple elements to "stack" a rounded corner, but the code If there are more, it will be annoying to look at. Of course there are other methods, friends can use their imagination, but they should definitely not be as smooth and direct as border-radius.

Whether you are fighting a hundred battles or not, it is still necessary to know yourself and the enemy, so let’s use CSS2 code to generate rounded corners to see the effect:

The idea is to use multiple divs to overlap to get the effect of rounded corners. The order of the div classes in the upper two corners and the lower two corners can be reversed, and the main div determines the size of the area.

HTML Markup

<!--左上角/右上角--><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"><!-- 主体部分 --></div><!--左下角/右下角--><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>

Copy after login

CSS Code

<!--左上角/右上角--><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"><!-- 主体部分 --></div><!--左下角/右下角--><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>

Copy after login

Let’s zoom in and take a look at the effect:

Everything that should be exposed is exposed. . .

The above is the rounded corner effect made by CSS2. There is obvious code duplication and a lot of code. If you want to use the same idea to generate a rounded corner with a larger radius, and you want the rounded corner effect to be more rounded, then you need to add more tags and more repetitive code. This is not what we want to see. of.

2. The border-radius attack of CSS3

The border-radius added to CSS3 has really brought us great convenience. First let’s look at its syntax:

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

Copy after login

border-radius is a shorthand attribute, used to set the attributes of border-*-radius. The value can be a numerical value or a value. Percentage, the four values are set in the order of top-left, top-right, bottom-right, bottom-left, that is, starting from the top and clockwise. Eight situations are discussed below.

1. There is only one value after the border-radius:20px; attribute, then top-left, top-right, bottom-right, bottom-left have the same radius. The effect is as follows:

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

3. border-radius: 20px 30px 40px; there are three attributes after it values, then top-left takes the first value, top-right and bottom-left take the second value, and bottom-right takes the third value. In fact, it is still based on top-left, top-right, bottom-right The order of bottom-left and bottom-left is set clockwise from the top. Because under normal circumstances the values of top-right and bottom-left are equal, the third value is naturally bottom-right. The effect is as follows:

4. border-radius: 20px 30px 40px 50px; there are four values after the attribute, then follow the rules of top-left, top-right, bottom-right, bottom-left The order is set clockwise from the top, and the values are taken in order. The effect is as follows:

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

5. border-radius: horizontal radius/vertical radius , that is, border-radius:20px/40px; that is, the four rounded corners take the same horizontal radius and vertical radius, which is actually a deformation of 1. 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 horizontal radius 1 and vertical radius 1, top-right and bottom-left take the horizontal radius 2 and the vertical radius 2, which are actually deformations 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 horizontal radius 1 and vertical radius 1, top-right and bottom -left takes a horizontal radius of 2 and a vertical radius of 2, and bottom-right takes a horizontal radius of 3 and a vertical radius of 3. In fact, it is a deformation of 3. The effect is as follows:

8、border-radius:水平半径1 水平半径2 水平半径3 水平半径4/垂直半径1 垂直半径2 垂直半径3 垂直半径4,即border-radius：20px 30px 40px 50px/60px 70px 80px 90px;即顺时针依次取值，其实属于4的变形，效果如下：

当然，除了像素等单位，还可以用百分号作单位，不要忘记哦~~~~~~~~~

让我们放大效果看一下：

放大以后，圆角依然是像素级别的，一下子感觉整个世界都圆润起来了呢。

当然，border-radius也可以拆开写：

border-top-left-radius: <length>  <length>   //左上角border-top-right-radius: <length>  <length>  //右上角border-bottom-right-radius:<length>  <length>  //右下角border-bottom-left-radius:<length>  <length>   //左下角

Copy after login

PS：对于较老的浏览器请不要忘记添加可恶的浏览器前缀-moz-/-webkit-。

三、这货能干什么

border-radius能干什么就是厨师做菜的问题了，不一样的厨师有不一样的思想，有不一样的手艺，做出来的菜肴也千差万别。

有这样的菜品：

也有这样的菜品：

还有这样椭圆的菜品：

或者来个圆圆的大饼等等：

如上图所示，border-radius为我们生成椭圆和圆提供了很大的便利，也为我们生成更多的图案提供的更多的可能。

四、小了个结

关于border-radius至此告一段落，希望能给需要的朋友带来帮助，有新的想法和问题也欢迎讨论，有讲的不对的地方还恳请批评指正。