Explain the Border-radius attribute in CSS3

Border-radius

Border-radius is an abbreviated method. If the value before or after "/" is present, the value preceding the "/" sets its horizontal radius, and the "/" values are set to its vertical radius. If there is no "/", the horizontal and vertical radii are equal.

CSS code copy content to clipboard

Border-radius:2em 1em 4em/0.5em 3em;

Equivalent to:

CSS code copy content to clipboard

Border-top-left-radius:2em 0.5em;

Border-top-rightright-radius:1em 3em;

Border-bottom-rightright-radius:4em 0.5em;

Border-bottom-left-radius:1em 3em;

How to use the Border-radius property

The following are the most basic uses of the Border-radius property.

CSS code copy content to clipboard

. 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's private properties * *

-webkit-border-radius:5px; /* WebKit Browser's private properties * *

border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper left corner, upper right corner, lower right corner and lower left corner.

}

1. Draw a circle with Border-radius

Solid Circle

As pictured, a perfectly solid circle is 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.

CSS code copy content to clipboard

#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 border width can only be less than half the height and width. The code is as follows.

CSS code copy content to clipboard

#circle {

width:200px;

height:200px;

Background-color: #efefef; /* Can is set to transparent * *

BORDER:3PX #a72525 Solid;

-webkit-border-radius:100px;

}

Dashed Circle

CSS code copy content to clipboard

#circle {

width:200px;

height:200px;

Background-color: #efefef; /* Can is set to transparent * *

border:3px #a72525 dashed;

-webkit-border-radius:100px 100px 100px 100px;

}

2. semicircle and One-fourth Round

Semicircle

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

CSS code copy content to clipboard

#quartercircle {

width:200px;

height:200px;

Background-color: #a72525;

-webkit-border-radius:200px 0 0 0;

}

One-fourth yuan

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

CSS code copy content to clipboard

#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 of them yourself, such as:

Dashed semicircle and One-fourth round.

Make a moon with the position attribute.

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