Css3:border-radius detailed

Border-radius Basic Syntax:

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

Range of Values:

<length>: the length value consisting of floating-point numbers and unit Identifiers. Cannot be Negative.

If you specify only one value in the Border-radius property, 4 rounded corners are Generated.

however, If you want to specify one by one on four corners, 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, the third value is the Lower-right corner
• two values: The first value is the Upper-left corner and the Lower-right corner, the second value is the Upper-right corner and the lower-left corner
• one value: four fillet values are the same

The following example is used to understand Border-radius specific usage:

One: Border-radius only one value, Four Corners have the same fillet setting, the effect is consistent:

1{2    width: 80px;  3    height: 80px;  4    background: #3ad7d7;  5    border: 2px solid #ff0000;  6    border-radius: 10px;/*4 Angular value equal to/7 }

Effect:

Two: Border-radius has two values, the Upper-left and Lower-right corner of the same, Upper-right and Lower-left corner of the same:

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

Effect:

Three: when the Border-radius has three values, the first value is taken at this time, the top right is equal to the lower left and they take the second value, and the third value is lower right:

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

Effect:

Four: Border-radius set four values, at which point the first value on the left, the second value on the right, and the bottom right to take the third Value. bottom left to take the fourth value:

1{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 Memory:

For example, starting from the top left, 1,2,3,4, four Corners. Regardless of the number of values, starting from 1, No value of the diagonal value, of course, 1 values when the 4 corners are equal, so that whether the horizontal radius and vertical radius is equal, can be well understood, not prone to Error.

Next look at the breakdown of the horizontal and vertical radii:

Let's start with a little demo----

1{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:

You can see that the values of the horizontal and vertical radii are set separately, no longer the same, or can be 1,2,3,4, only the horizontal and vertical radii are separated.

20px/40px Slash '/' precedes the value of the horizontal radius, followed by the value of the vertical radius. also, the horizontal and vertical radii of each corner can be set differently.

1{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:

Each corner is set with a different horizontal and vertical radius, each with a flair. Regardless of how to set the value, you can start from the upper left corner of the seat, not to take the value of the diagonal Value.

Now we can open the brain hole, set different radii, make a special pattern, here is not to be included in the length of the List.

Draw a circle with Border-radius

Let's start with demo---

1. Round Without Borders

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

effect:

A circle without a border, just width and height equal, Border-radius is half the width of the high.

2. Round with border

A circle with a border, you need to take into account the width of the border. first, a counter-example:

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

Effect:

You can see that the width of the border is ignored, only half of the width of the Border-radius is set, and it is not a circle.

Look at a demo with a frame in mind

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

Effect:

The result is Obvious. So when you draw a circle, you should also pay attention to whether there is a border.

finally, Attach a small demo.

<! DOCTYPE html>{margin:30px;Background-color:#ffffff; }div.polaroid{position:relative;Top:50%; left:50%;width:16px;Height:16px;Background-color: white;Animation:localshine 2s linear infinite;Border-radius:8px}@keyframes Localshine{from {box-shadow:0 0 0 0 #E6E6E6; } to{Box-shadow:0 0 0 6px #cbcbcb; }} </style>

Effect:

Css3:border-radius detailed