CSS3: border-radius detailed explanation, css3border-radius

CSS3: border-radius detailed explanation, css3border-radius
Border-radiusBasic Syntax:

　　Border-radius: none | <length> {1, 4} [/<length> {1, 4}]?

Value range:

<Length>: A length value composed of floating-point numbers and unit identifiers. It cannot be a negative value.

 

If you specify only one value in the border-radius attribute, four rounded corners are generated.

However, if you want to specify the Four Corners one by one, you can use the following rules:

• Four values:The first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
• Three values:The first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner.
• Two values:The first value is the upper left and lower right corner, and the second value is the upper right and lower right corner.
• One value:The four rounded corners have the same value.

 

The following describes how to use border-radius through an instance:

1. When border-radius has only one value, the four corners have the same rounded corner settings, and the effects are consistent:

1. demo1 {2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid # ff0000; 6 border-radius: 10px; /* the values of the four corners are equal */7}

Effect:

 

2. When border-radius has two values, the upper left and lower right corner are the same, and the upper right and lower left are the same:

1 .demo2 {2     width: 80px;3     height: 80px;4     background: #3ad7d7;5     border: 2px solid #ff0000;6     border-radius: 5px 10px;7 }

Effect: 1. demo3 {2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid # ff0000; 6 border-radius: 5px 10px 15px; 7}Effect:

 

4. Set four values for border-radius: First value on the top left, second value on the upper right, third value on the lower right, and fourth value on the lower left:

1 .demo4 {2     width: 80px;3     height: 80px;4     background: #3ad7d7;5     border: 2px solid #ff0000;6     border-radius: 5px 10px 15px 20px;7 }

Effect:

 

Easy to understand and remember:

For example, starting from the top left, there are four corners: 1, 2, 4, and 4. Whether it is a few values, from 1 to the beginning of the pair, no value to take the diagonal value, of course, when one value is equal to the four corners, regardless of whether the horizontal radius and vertical radius are equal, are easy to understand and error-prone.

 

 

Next let's take a look at the subdivision of the horizontal and vertical radius:

Let's get a demo ----

 

1. demo5 {2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid # ff0000; 6 border-radius: 20px/40px; /* horizontal radius/vertical radius */7}

 

Effect:

We can see that the values of the horizontal and vertical radius are set separately. It is no longer the same. We can still use the, pairs, but the horizontal and vertical radius are separated.

The front of 20px/40px slash '/' is the horizontal radius value, followed by the vertical radius value. Similarly, the horizontal and vertical radius of each angle can be set to different ones.

1. demo6 {2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid # ff0000; 6 border-radius: 10px 20px 15px 30px/40px 5px 30px 10px;/* horizontal radius/vertical radius */7}

Effect:

Different horizontal and vertical radius are set for each angle. No matter how you set the value, you can set a one-to-one pair number from the upper left corner. If no value is obtained, you can obtain the diagonal value.

Now you can open your mind, set different radius, and create special patterns. Here we will not detail them one by one.

 

Circle with border-radius

First demo ---

1. Circle without Borders

 

1 .demo7 {2     width: 80px;3     height: 80px;4     background: #3ad7d7;5     /*border: 2px solid #ff0000;*/6     border-radius: 40px;7 }

 

Effect:

 

The circle without borders only needs to be equal to the width and height, and the border-radius is half of the width and height.

 

2. Circle with borders

The circle with a border needs to take the Border width into consideration. Here is a counterexample:

1 .demo8 {2     width: 80px;3     height: 80px;4     background: #3ad7d7;5     border: 5px solid #ff0000;6     border-radius: 40px;7 }

Effect:

We can see that the border width is ignored and only the half of the border-radius is set to the width height. The circle is not displayed.

 

Let's look at a demo that considers the border.

1 .demo9 {2     width: 80px;3     height: 80px;4     background: #3ad7d7;5     border: 5px solid #ff0000;6     border-radius: 45px;7 }

Effect:

The result is obvious. Therefore, when drawing a circle, pay attention to whether there is a border.

 

 

 

 

A small demo is attached.

<!DOCTYPE html>
Effect: