CSS3 attribute rounded corner effect--border-radius attribute_html/css_WEB-ITnose

Before css3, the effect of rounded corners could be achieved through images or using the margin attribute (you can refer to here: http://www.hicss.net/css-practise-of-image-round-box /). The implementation process is tedious, but the arrival of CSS3 simplifies the way to achieve rounded corners.

CSS3 requires the border-radius attribute to implement rounded corners, but due to browser compatibility issues, a private prefix must be added during the development process.

-webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius

The border-radius attribute can actually be divided into four other attributes:

border-radius-top-left         /*左上角*/border-radius-top-right       /*右上角*/border-radius-bottom-right /*右下角*/border-radius-bottom-left   /*左下角*///提示：按顺时针方式

A few examples are used below. Show the specific usage of border-radius.

1. Border-radius single attribute value:

//HTML清单<div class="roundedCorner">

.roundedCorner{    width:100px;    height:100px;    background-color:#f90;    border-radius:10px;//左上，右上，右下，坐下都是10px}

Effect:

​​ ​

2. Border-radius is an attribute value method:

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单.roundedCorner2{    width:100px;    height:100px;    background-color:#f99;    border-radius:20px 10px 5px 2px;}

Effect:

                                                In the process (I In my work), the border-radius single attribute value is often used, and it is rare to set four different rounded corners.

The advantage of border-radius is not only to make rounded borders, but also to use the border-radius attribute to draw circles and semicircles.

1. Method of making a semicircle:

The height of the element is half the width, and the height of the radius element in the upper left corner and the upper right corner is the same (it is also possible to be larger than the height, at least height value).

<div class="semi-circle"></div>.semi-circle{    width:100px;    height:50px;//高度是宽度的一半    background-color:#000;    border-radius:50px 50px 0 0;//左上和右上至少为height值}

Effect:

                                          I’ve drawn circles in other directions, so I won’t go into details here. .

2. How to draw a solid circle:

The width and height are the same (square), and then the four corners are set to 1/2 of the height or width.

Effect:

<div class="circle"></div>.circle{    width:100px;    height:100px;    background-color:#cb18f8;    border-radius:50px;}

                                                                                                 🎜>

CSS3’s way of implementing rounded corners is both elegant and Convenient, but the compatibility is not good enough. If you need to consider older versions of browsers, you can consider graceful downgrading. The advantages of the two methods mentioned at the beginning are good compatibility, but they are not elegant enough.

Which method to use depends on the specific project requirements.