Border Effect of CSS3 Attributes -- border-radius attributes, css3border-radius

Border Effect of CSS3 Attributes -- border-radius attributes, css3border-radius

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

The border-radius attribute must be used to implement the rounded corner in CSS3. However, due to browser compatibility issues, a private prefix must be added during development.

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

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

Border-radius-top-left/* top left corner */border-radius-top-right/* top right corner */border-radius-bottom-right/* bottom right corner */border-radius- bottom-left/* lower left corner * // The following message is displayed: clockwise

The following example shows how to use border-radius.

1. Single border-radius attribute values:

// HTML list <div class = "roundedCorner">

. RoundedCorner {width: 100px; height: 100px; background-color: # f90; border-radius: 10px; // top left, top right, bottom right, and bottom right. All sit-down values are 10px}

Effect:

2. border-radius is an attribute value:

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

Effect:

However, in the development process (in my work), the border-radius single attribute value is often used, and four different rounded corners are rarely set.

The advantage of border-radius is not only to create the border of the rounded corner, but also to draw the circle and the half circle using the border-radius attribute.

1. How to Create a semi-circle:

The height of an element is half the width, and the height of the radius element in the upper left corner is the same as that in the upper right corner (it is acceptable to be greater than the height, at least the height value ).

<Div class = "semi-circle"> </div>. semi-circle {width: 100px; height: 50px; // The height is half the width of background-color: #000; border-radius: 50px 50px 0 0; // The value of height must be at least the upper left and upper right sides}

Effect:

If you know how to draw a half circle, you will draw a circle in another direction.

 

2. How to draw a solid circle:

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

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

Effect:

 

Summary:

CSS3 implements rounded corners in an elegant and convenient way, but its compatibility is not good enough. If you need to consider the old version of the browser, you can consider the elegant downgrade method. The advantages of the two methods mentioned at the beginning are good compatibility, but not elegant enough.

Which method is used? Check the specific project requirements.