The Hidden power of Css3:border-radius

This article will briefly describe the use of CSS3 's Border-radius to draw circles, semicircular and One-fourth circles, and how to use them.

How to use the Border-radius property

The following are the most basic ways to use the Border-radius property.

1234567

. round {border-radius:5px;/* All corners use rounded corners with a radius of 5px, this property is CSS3 Standard property */-moz-border-radius:5px; */* Mozilla browser private properties */- webkit-border-radius:5px; /* Private properties of WebKit browser */border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left */}

about how to realize the fillet in IE, can see "excellent article which Included Ways to Achieve rounded corners in IE" this article.

1. Draw, round heart circle with Border-radius

, is a perfect solid circle drawn with the Border-radius attribute. The method of drawing a solid circle is equal in height and width, and the width of the border is set to half the height and width. The code is as follows.

123456

#circle {width:200px;height:200px;background-color: #a72525;-webkit-border-radius:100px;}

Hollow Circle

The method of drawing hollow circles and drawing solid circles through the Border-radius property is similar, except that the width of border is only half that of height and width. The code is as follows.

1234567

#circle {width:200px;height:200px;background-color: #efefef;/* Can is set to transparent */ border:3px #a72525 Sol id;-webkit-border-radius:100px;}

Dashed Circle

1234567

#circle {width:200px;height:200px;background-color: #efefef;/* Can set to Transparent */ border:3px #a72525 das hed;-webkit-border-radius:100px 100px 100px 100px;}

2. semicircle and One-fourth round semicircle

In this case, the semi-circular drawing is half the width of the height, and only the radius of the upper left and lower left corner is set. The code is as follows.

123456

#quartercircle {width:200px;height:200px;background-color: #a72525;-webkit-border-radius:200px 0 0 0;}

One-fourth yuan

The One-fourth circle is implemented by setting the height and width to equal, setting only one fillet, with a radius equal to the height or width. This example code is as follows.

123456

#quartercircle {width:200px;height:200px;background-color: #a72525;-webkit-border-radius:200px 0 0 0;}

More gameplay

After seeing so many examples, you can create more gameplay yourself, such as:

Dashed half-circle and One-fourth round.

Make a moon with the position property.

With position, RGBA, and z-index these attributes make a color Venn diagram at the beginning of this article.

Original: The Hidden power of Border-radius

The Hidden power of Css3:border-radius