How to use css border-radius to achieve fillet effect

This article introduces the relevant knowledge of "how to use css border-radius to achieve fillet effect". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Before css3, the effect of rounding can be achieved through images or by using the margin attribute. The implementation process is tedious, but the arrival of CSS3 simplifies the way to achieve fillets. CSS3 fillet requires the use of the border-radius attribute, but due to browser compatibility issues, private prefixes are added in the development process.

Border-radius attribute implementation

-webkit-border-radius

-moz-border-radius

-ms-border-radius

-o-border-radius

The border-radius property can actually be divided into four other properties:

Upper left corner of border-radius-top-left/* * /

Upper right corner of border-radius-top-right/* * /

Lower right corner of border-radius-bottom-right/* * /

Lower left corner of border-radius-bottom-left/* * /

/ / hint: clockwise

The specific usage of border-radius

Border-radius:5px4px3px2px;/* four radius values are upper left corner, upper right corner, lower right corner and lower left corner, clockwise * /

Solid upper semicircle:

Method: set the width (width) to half the height (height), and only set the radius of the upper-left corner and the upper-right corner to be consistent with the height of the element (greater than is also possible).

Solid circle:

Method: set the width (width) and height (height) values to be the same (that is, square), and the four fillet values are set to half of their values. The code is as follows:

Copy the code

Div.circle {

Height:100px;/* and width settings are the same * /

Width:100px

Background:#9da

All four border-radius:50px;/* fillet values are set to half of the width or height value * /

}

"how to use css border-radius to achieve fillet effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!