Css3:border-radius rounded border detailed (round picture)

Ext.: http://www.kuqin.com/shuoit/20141014/342620.html

border-radius:50%

Today to talk about this border-radius attribute, radius of the English meaning is the meaning of radians, and people prefer to call it fillet, because it can make our borders angular. When the predecessors are used to take pictures of the era of the round or with a border structure of the era has gone, and the rapid development of mobile Internet for the fast development of border-radius properties, so today to talk about rounded border. Although the English translation is called radius radian, but in order to make everyone more familiar with, the following unified use of fillet radius instead.

Related introduction

This borde-radius property is also a shorthand value, which is Border-top-left-radius (top left corner radius), Border-top-right-radius (upper right corner radius), Border-bottom-right-radius (lower right corner radius), Border-bottom-left-radius (lower left corner radius), as shown:

When it comes to the radius, I suddenly think of the past mathematics learned about the circle and radius of the relationship, the encyclopedia is as follows:

In a circle, the segment that connects the center of the circle and any point on the circles is called the radius of the circle. Usually denoted by the letter R.
In the ball, the segment connecting the sphere and any point on the sphere is called the radius of the sphere.
The radius of the circumscribed circle in which the positive polygon is located is called the radius of the inner regular polygon of the circle.

The radius of the CSS is also related to the circle, but the ellipse or circle is divided, because the CSS is divided into the vertical radius and the horizontal radius. and the circle in the geometry can draw a circle as long as the radius is determined. The fillet in CSS is determined to be rounded when a value is used, and when two values are used, an elliptical fillet is determined, but whether the fillet or ellipse angle is actually a bit like the background and setting of the fillet radius overlap, the browser removes their disjoint parts, leaving the intersecting parts, The intersection of two intersecting graphs like CDR.

It may be difficult to understand at first, so take a look down.

Said about the east, then the question came, rounded border specific value of what, MO anxious teenager, on the world of the search for code.
Explanations for BORDER-RADIUS,W3C on the right:
Border-*-radius

Property name:	Border-top-left-radius, Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius
Property value:	[<length> | <percentage>] {A}
Initial value:	0
Apply to:	All elements except the table cell border is collapse
Inheritance:	No
Percentage:	The width of the border-box according to the box border.
Calculated value:	Two lengths, respectively <length> or percentages

A detailed description of the property values:
[<length> | <percentage>]: A value must appear, can be a percentage of length, such as: border-top-left-radius:5px , border-top-left-radius:5px 50% is feasible
{A}: indicates that their values can be repeated one time, up to a maximum of two repetitions. If there is only one value, which represents the fillet, then its horizontal distance is equal to the vertical distance, that is, the second value duplicates the first value, and if it is two values, then determines an ellipse angle, the horizontal radius of the first value ellipse, the second value is the vertical radius of the ellipse, which is a bit awkward, directly:

Only 1 values, such as: border-top-left-radius:50px , represent a radius of 50px circle,

The label is wrong, the box size is: 300*100

If there are two values, such as:, an ellipse with a border-top-left-radius:50px 100px horizontal radius of 50px and a vertical radius of 100px,

Similarly Border-top-right-radius (upper right corner radius), Border-bottom-right-radius (lower right corner radius), Border-bottom-left-radius (lower left corner radius). You just have to remember. When a corner is a value, it is determined to be a circle when an ellipse is determined with two values.
You can tap the demo on the right: the upper-left corner is a rounded corner and an elliptical corner demo

Mobile Party ↓

Knowing how the 4 corners work, it's time to look at the property values of the global fillet.

property name:	border-radius
property value:	[ <length> | <percentage> ] {1,4} [/[ <length> | <percentage> ]{1,4}]?
Initial value:	details see table cell values
apply to:	all elements except table cell borders collapse
inheritance:	none
percent:	width according to box border Border-box.
Computed value:	details see table cell values

A detailed description of the property value
1. [ <length> | <percentage> ] : Indicates the radius length of the fillet, and one of the values must appear.
2, {1,4}: The previous length value or percentage, the minimum repetition once, the maximum can be repeated 4 times, such as:border-radius:5pxborder-radius:5px 10pxborder-radius:5px 10px 15pxborder-radius:5px 10px 15px 20px
3, [/[ <length> | <percentage> ] {1,4}]: Indicates that if you want to have the values contained in brackets, then use/to connect, such as: In border-radius:5px 10px 15px 20px / 5px 10px 15px 20px fact, the following 4 values is to control its vertical radius, specify whether the fillet is an elliptical angle or a circular angle.

4.: This string of numbers surrounded by brackets [] above is optional and may not appear.

The size of the box is 200*100, the width of the frame is 1px, and the magnification is 200%.

1 values: a circle with a radius of 5px in the upper-left corner, upper right corner, lower right corner, border-radius:5px and lower left corner. That is, the value is copied, and the second, third, and fourth values are duplicates of the first value.

2 values: Then the radius of the top and bottom border-radius:5px 10px right, upper right, and lower left corner of the circle is the same, that is, the third copy is the first, the fourth copy the second value.

3 values: a circle with a radius of 5px in the upper-left corner, a circle with a radius of 10px in the upper-right corner and the lower-left corner, a circle with a border-radius:5px 10px 15px 15px radius in the lower-right corner, or a fourth copy of the second value.

4 values:, then the upper left corner radius is 5px circle, the upper right corner radius is 10px circle, the lower border-radius:5px 10px 15px 20px right corner radius is 15px circle, the lower left corner radius is 20 circle, here the value is not copied.

You can tap the demo:4 of the right side of the value of the round demo

Actually refers to the value of copying, before I specifically to the margin and padding the two attributes of the shorthand value meaning, actually see the CSS syntax in {1,4} is that, if a value is default, then it will copy another value as its own value, Portal: Analyze margin and padding shorthand values

Just before the 3rd already mentioned, oblique carry "/" symbol after the 4 values optional, if you want to choose, then you must use the oblique sign "/" to separate, the value of the trailing sign to determine the vertical radius of an ellipse, if the border-radius:5px / 5px 10px 15px 20px four angle of the vertical radius is 5px,10px,15px,20px. As above, these 4 vertical radius values correspond to the angles of Border-top-left-radius (the vertical radius of the upper left corner), Border-top-right-radius (the vertical radius of the upper right corner), Border-bottom-right-radius (vertical radius of lower right corner), Border-bottom-left-radius (vertical radius of lower left corner)

1 values: border-radius:5px/5px , the horizontal radius and the vertical radius are equal, so it is a circle,

2 values: a circle with a horizontal and vertical radius of 5px in the upper-left and lower-right corners, a horizontal radius of 5px in the upper-right corner and lower-left corner, and an ellipse with a border-radius:5px/5px 10px vertical radius of 10px.

3 values: border-radius:5px/5px 10px 15px , then its upper-left corner radius is 5px circle, the upper right and lower left corner of the horizontal radius of 5px, the vertical radius of 10px ellipse, the lower right corner of the horizontal radius is 5px, the vertical radius of the 15px ellipse,

4 values: border-radius:5px/5px 10px 15px 20px , then its upper-left corner radius is 5px circle, the upper right corner of the horizontal radius is 5px, the vertical radius is 10px ellipse, the lower right corner of the radius is 5px, the vertical radius of the ellipse is 15px circle, the lower left corner of the horizontal radius of 5px, the vertical radius of the 20px ellipse,

You can poke the right side of the demo:4 with different values of the elliptical angle demo

Mobile Party ↓

Graphic

Just at the very beginning of the intersection we mentioned, I personally think, for this radius attribute, is actually the original box with this "invisible" circle or ellipse after the combination of the product, so I understand this rendering process:

. br5{width:300px;height:200px;background: #F8D575; border-radius:50px;}//css Code

1, first render the box model, here is 300*200px

2, re-render the Border-radius property, because it is used here border-radius:50px , in fact, it has already included four corners, respectively, the upper left corner, the upper right corner, the lower right corner and the lower left corner

The corresponding location is as shown

Let's put the box and the invisible circle together and see

Then the intersection of the outer box and the circle should be the following part

3, the browser retains the internal structure of the box at the same time, only the box and the "invisible" circular intersection of the part, so four 90° angle is covered by a fillet, but the box model still works.

4, of course, for those four rounded corners we are invisible to the naked eye, the browser will not be silly to show up, so the final presentation in front of us should be such as:

The above is through the research, after all, the English you understand, if you have any opinion please below the comments in the present.
Do you think it's over? Want to sleep all ...

Talk about overlap.

When do they overlap and what happens after they overlap? This overlap is a bit of a point, huh, that's how we construct our pure circle.
Overlap is divided into three different cases:
1, upper left corner and upper right corner overlap, when width < fillet radius * * appear, code:.demo{width:50px;height:100px;border-radius:50px;}

2, the upper left corner and the lower left corner overlap, when the width > fillet radius is * *, the code:.demo{width:200px;height:100px;border-radius:50px;}

3, Four Corners overlap, when the width = height = radius of the fillet, then at this time, Four corners will overlap together, forming a circular.demo{width:100px;height:100px;border-radius:50px;}

Calculation of radius after overlap

Two code snippets below

Box-sizing:border-box;width:6em;height:2.5em;border-radius:0.5em 2em 0.5em 2em;box-sizing:border-box;width:6em; Height:2em;border-radius:0.5em 2em 0.5em 2em

In the first fragment, height (2.5em) is exactly the sum of two adjacent radii (0.5em + 2em), then four corner radii are 0.5em 2em 0.5em 2em respectively. But if the height is only 2em, the height can not accommodate the radius of 0.5em + 2em of the Circle (2.5em), so they can only reduce to a height (2em) to fit the two circles, that is, 2em, so the corresponding upper-left and lower-right corner is reduced to 0.4em, the upper right and lower left corner to 1.6em, this time exactly equal to the height (2em).
That is, 2em/0.5em + 2em=0.8, each corner is reduced by this ratio by 0.8, so the radius is: Border-radius:0.4em 1.6em 0.4em 1.6em, not the previous border-radius:0.5em 2EM 0.5em 2EM

Application

Since learning this fillet attribute, then to do a demo bar, so on the internet to find Opera browser logo, this analysis is not difficult, only two layers, one is the bottom of the ellipse, one is the topmost layer of the ellipse.

Original diagram

Eventually

1, first determine the bottom of the oval width, the amount of a bit, the horizontal width of 258px, vertical height of 275px, because it is a symmetrical ellipse, no inclination, so 4 corners are the horizontal radius of 258px, the vertical radius of 275px 4 equal ellipse, the code is as follows

. opera{border-radius:258px 258px 258px 258px/275px 275px 275px 275px}

2, use the same method to determine the radius of the innermost ellipse, therefore, four corners are the horizontal radius of 120px, the vertical radius of 229px ellipse

. opera-top{border-radius:112px 112px 112px 112px/231px 231px 231px 231px;}

The complete code is as follows

. opera{width:258px; height:275px;  Background-color: #f22629; border-radius:258px/275px; position:relative; Z-index:1;}. Opera-top{width:112px;height:231px;background-color: #fff; border-radius:112px/231px;position:absolute;left:73px ; top:23px;z-index:2;}

Css3:border-radius rounded border detailed (round picture)