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

This article mainly shows you "what are the styles of setting fillet frames in css3", the content is simple and clear, and I hope it can help you solve your doubts. Let me lead you to study and learn about "what are the styles of fillet frames in css3".

The styles are: 1, "border-radius: radius value;"; 2, "border-radius: radius value;"; 3, "border-radius: radius value;"; 4, "border-radius: radius value;".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Fillet border

1. Brief introduction of border-radius attributes

Add a fillet border to the element, and you can fillet the four corners of the element (the attribute is not inherited)

Second, the definition method of border-radius

There are two ways to define the border-radius property: border-radius can set the same value for all four corners at once (abbreviated properties), or you can set fillet styles for each of the four corners (individually set).

(1) individual attribute settings

Border-radius: sets the fillet style for four borders at the same time

Border-top-left-radius: sets the fillet style of the upper-left border

Border-top-right-radius: sets the fillet style of the upper-right border

Border-bottom-left-radius: sets the fillet style of the lower-left border

Border-bottom-right-radius: sets the fillet style of the lower right corner border

Note that the order of the borders cannot be disrupted, for example, border-top-left-radius cannot be written as the border-left-top-radius attribute is fixed. ]

Through the actual operation, we can see that the expression effect of the two is the same.

(2) abbreviated attributes

Set four parameters for border-radius, pay attention to the order relationship

1. Set only one value for the property, and the fillets of the four borders all have the same value

Border-radius:20px / / four border fillets are 20px

2. Set two values for the property, the first value sets the upper left corner and the lower right corner, and the second value sets the upper right corner and lower left corner

Border-radius: 20px 50px / / upper left corner and lower right corner 20px, upper right corner and lower left corner 50px

3. Set three values for the property, the first value to the upper left corner, the second value to the upper right corner and the lower left corner, and the third value to the lower right corner

Border-radius: 20px 50px 5px / / upper left corner 20px, upper right corner and lower left corner 50px, lower right corner 5px

4. Set four values for the property, the first value is set to the upper left corner, the second value is set to the upper right corner, the third value is set to the lower right corner, and the fourth value is set to the lower left corner (clockwise)

Border-radius: 20px 50px 5px 100px / / upper left corner 20px, lower right corner 50px, lower right corner 5px, lower left corner 100px

3. Set horizontal radius and vertical radius respectively

Syntax of border-radius

Border-radius: {1-4} length /% / {1-4} length /%

Border-radius: 20px 10px 40px / 25px 30px

Length defines the shape of the fillet;% defines the shape of the fillet as a percentage; the number of parameters for {1-4} border-radius ranges from 1 to 4.

Note [sets four values for each radii (radius) in this order. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.

The number of parameters of border-radius ranges from 1 to 4. Here, we should pay attention to the use of horizontal radius and vertical radius: first set the horizontal radius of 4 corners and then set the vertical radius of 4 corners in border-radius. ]

Example:

Div {border-radius: 20px 5px 100px/15px 30px;}

Equivalent to

Div {border-top-left-radius: 20px 15px; border-top-right-radius: 5px 30px; border-bottom-right-radius: 100px 15px; border-bottom-left-radius: 5px 30px;}

Expression effect

IV. Application

Create a circle using border-radius

Enter border-radius:r, where the radius of the r element (in units of length). To create a circle, set the value of r to half the height and width of the element.

This method of value is a circle when the height and width of the element are equal.

Code

Css3 fillet border # box1 {width: 200px; height: 200px; background-color: # 567; border:5px solid red; border-radius: 50%; margin: auto; box-shadow:10px 10px 5px # a2a2a3;}

Performance effect

When we set the width and height of the element to be no longer equal and changed to width:200px;height:100px, it shows an oval shape.

Border-radius to achieve circular and semicircular effects

There is a feature in border-radius:

Set a large enough border-radius to any square to turn it into a circle.

Note: when the sum of the radii of any two adjacent fillets exceeds the size of the borderbox, the user agent must scale down the values indicated for each border radius until they do not overlap each other.

Why is it called border-radius?

Some people may wonder how border-radius got its name. This property does not require a border to participate in the work, and it seems more appropriate to call it a content fillet.

The actual reason is that border-radius fillets the element borderbox. When an element does not have a border, the difference may not be seen; when it has a border, the corner outside the border is used as the base for the fillet. The fillet on the inside of the border will be slightly smaller (strictly speaking, the radius of the inner corner will be max).

Example:

(1) border-radius draws a circle

Div {width:200px; height:200px; border-radius:50%; background: # f775a9;}

Performance effect:

To achieve a circle, you must first set a square.

You can achieve a circular effect by setting any percentage greater than or equal to 50% to border-radius.

For example, you can also get a circle by setting border-radius:70%,.

(2) border-radius realizes semicircle in four directions

The fillet is equivalent to the cutting of the content by the border, and the larger the fillet value is, the more round the element is cut.

Border-radius .box1 {width:200px;height:100px; border-radius:400px 400px 00; background: # f775a9; float:left;} .box2 {width:100px;height:200px; border-radius:300px 00 300px; background: # fabab8; float:left;} .box3 {width:200px;height:100px Border-radius:0 0 200px 200px; background: # aadfe6; float:left;} .box4 {width:100px;height:200px; border-radius:0 100px 100px 0; background: # 79e0c3; float:left;} .box5 {width:100px;height:200px; border-radius:0 50px 50px 0; background: # acbfea Float:left;} 1 2 345

These are all the contents of this article entitled "what are the styles of fillet borders in css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.