CSS3 learning notes border-radius

I think CSS3 is very good. I have read it a little and tried some attributes. For myself, I don't have the courage to say that I have learned CSS3. I think that anything I think is very small is just to judge from my own perspective. Even the "simple" HTML is worth studying in my opinion. Only by maintaining a humble attitude at all times can we see farther and stay more stable.

Here, I would like to thank the website:

W3cplus, W3School, W3C, and so on some online tutorials, blogs, and so on (and a lot of them are not listed one by one). I have started to contact the legendary CSS3 and html5, your learning notes will naturally be used for reference.

Today we will introduce the rounded corner of CSS3: border-radius

 

Imagine that year ...... It is a learning to create rounded corners on the basis of CSS2 !! Various images and nesting ("proficient in CSS-advanced web standard solution" has been introduced, and the process will not be mentioned here. It can be found on the Internet, in short: I think it is very high-end before CSS3 is useless. I don't want to see it again after CSS3 is used)

However, since the emergence of the border-radius attribute of CSS3, the majority of front-end engineers can save a lot of trouble, not only reducing the workload, but also improving the performance of the website. Unfortunately, the noble earlier version of IE does not support the vast majority of CSS3 attributes ...... Or almost none of them are supported. Although many compatible solutions for Internet Explorer are provided, I do not recommend them. Most of the time, the rounded corner is visually more elegant and does not affect user use.

You can't see the rounded corner. You can only be friends with earlier IE !!!!

Okay. Now we will officially introduce this noble attribute.

Border-radius usage:

Attribute name	Border-top-right-radius,Border-bottom-right-radius,Border-bottom-left-radius,Border-top-left-radius,Border-radius
Attribute Value	Length (eg: 10px)
Initial Value	0
Inherit?	Cannot inherit

The value in border-radius determines the arc shape,The arc of each angle is actually the 1/4 arc of the circle drawn from the radius of the value set on this angle.

Example: When border-radius has only one value

Set border-radius: 50px;

CSS code:

   1:  .test{

   2:      width:200px;

   3:      height:200px;

   4:      background:#368;

5: margin: 80px auto;/* no other meaning to center the element */

   6:      -webkit-border-radius:50px;

   7:      -moz-border-radius:50px;

   8:      -o-border-radius:50px;

   9:      border-radius:50px;

  10:  }

HTML code:

   1:  <div class="test"></div>

The effect is as follows: To make the effect more obvious, change the border-radius value to 100px, that is, half of the width of div. test:

As you can see, it is now a complete circle !!!! If we go to the center of the circle, we can see that we have made a line in both the horizontal direction and the vertical direction.The arc of each angle is actually the 1/4 arc of the circle drawn with the radius.

 

For example, when border-radius has multiple values

Set border-radius: 100px 50px; (the code is similar to the above, but the border-radius is modified, so it is not repeated ).

After testing, the effects of Google, Firefox, IE9, and 10 are as follows:

If we are like. Set "Left" in the upper left corner, "right" in the upper right corner, and so on. The border-radius rules of the two values are like margin, and the padding rules are the same. The first value indicates upper and lower, the second value indicates left and right.

Similarly, set border-radius: 100px 50px 0px;

The effect is as follows:

 

Set border-radius: 100px 50px 25px 0px;

The test results are as follows:

As mentioned earlier, the border-radius value is set like padding and miargin, which is very simple.

Okay. Here we will summarize the usage:

• When there is only one value, the four corners are rounded with the same radians.
• When there are only two values, the first value indicates the upper left corner and the lower right corner, and the second value indicates the upper right corner and the lower left corner.
• When there are three values, the first value indicates the upper left corner and the second value, that is, the middle value is white. The third value indicates the lower right corner.
• When there are four values, they are represented in the order of top left, top right, bottom right, and bottom left.

 

 

This is the end of the full text. If you have any errors, please correct them !!