current position:Home>How can CSS set four fillets respectively?

How can CSS set four fillets respectively?

2022-01-26 22:54:12 Terence Wang

css How to set the border ? Many times when developing the front end of the web page , In order to make the things on the web page look more comfortable , We may need to set some rounded borders, such as buttons , that , How do we set the rounded border ? This article will introduce you to css How to set the rounded border .
css The most common and easiest way to set a rounded border is to use border-radius attribute .

CSS Only one property needs to be set for fillet :border-radius( The meaning is " Border radius "). You provide a value for this property , You can set the radius of four fillets at the same time . All legal CSS Measures can be used :em、ex、pt、px、 Percentage, etc .

border-radius It can be set at the same time 1 To 4 It's worth .

If you set 1 It's worth , Express 4 All rounded corners use this value .

css Rounded border code :border-radius: 15px;

If you set two values , Indicates that the upper left corner and the lower right corner use the first It's worth , The upper right and lower left use the second value .

css Rounded border code :border-radius: 15px 5px;

 

If you set three values , Indicates that the first value... Is used in the upper left corner , The upper right and lower left use the second value , Use the third value in the lower right corner .

css Rounded border code :border-radius: 15px 5px 25px;

If you set four values , Then in turn Corresponding to the upper left corner 、 Upper right corner 、 The lower right corner 、 The lower left corner ( Clockwise order ).

css Rounded border code :border-radius: 15px 5px 25px 0px;


border-radius You can also set a second set of values with slashes . The first set of values represents the horizontal radius , The second set of values represents the vertical radius . The second set of values can also be set at the same time 1 To 4 It's worth , The application rule is the same as the first set of values .

Besides setting four fillets at the same time , You can also set each corner separately . Corresponding to four corners ,CSS3 Four separate properties are provided :

border-radius Use this element to set four boundary radius attributes
border-top-left-radius Use this element to set the upper left radius attribute
border-top-right-radius Use this element to set the upper right radius attribute
border-bottom-left-radius Use this element to set the lower left radius attribute
border-bottom-right-radius Use this element to set the lower right radius attribute

All four properties can be set at the same time 1 To 2 It's worth . If you set 1 It's worth , It means that the horizontal radius is equal to the vertical radius . If you set 2 It's worth , The first value is the horizontal radius , The second value represents the vertical radius .

copyright notice
author[Terence Wang],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262254105190.html

Random recommended