Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use the border-radius attribute in CSS3 to make commonly used graphics. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Make a positive circle with border-radius.

The four values of the border-radius attribute represent the upper left corner, the upper right corner, the lower right corner and the lower left corner. If only one value is set, all four corners are the same size. When we draw a circle, we only need to set the value of the four corners to half the length of div, the length and width of div are 200px, and the value of the four corners is 50% (in this case, 100px). The code is as follows:

Div {

Width:200px

Height:200px

Background:orangered

Border-radius:50%

Line-height:200px

Text-align:center

Font-size:40px

}

2. Make semicircle with border-radius

The upper left corner and upper right corner of the semicircle are fillets, and the lower right corner and lower left corner are right angles. Set the value of the upper left corner and upper right corner to half of the length of div, and the value of the lower right corner and lower left corner to 0; in addition, set the height value to half of the original height is the standard semicircle. The code is as follows:

Div {

Width:200px

Height:100px

Background:red

Border-radius:100px100px00

Line-height:100px

Text-align:center

Font-size:40px

}

3. Use border-radius to make fan shape

The upper left corner of the fan is a fillet, and the other three corners are right angles. As long as the value of the upper left corner is set to the same value as the width and height, the values of the other three corners remain the same (equal to 0). The code is as follows:

Div {

Width:200px

Height:200px

Background:red

Border-radius:200px00

Line-height:200px

Text-align:center

Font-size:40px

}

4. Use border-radius to make arc.

The arc changes its two diagonal angles, while the other two diagonal angles remain the same. Set its upper left corner and lower right corner to the same value as width and height, and the values of the upper right corner and lower left corner remain the same (equal to 0). Also add the transform attribute to rotate it into a flat arc. The code is as follows:

Div {

Width:200px

Height:200px

Background:red

Line-height:200px

Text-align:center

Font-size:40px

Border-radius:200px0

-webkit-transform:rotate (45deg)

-ms-transform:rotate (45deg)

-o-transform:rotate (45deg)

Transform:rotate (45deg)

}

On "how to use the border-radius attributes in CSS3 to make commonly used graphics" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.