Brief analysis of CSS3 Border-radius

Basic syntax for 1.border-radius:

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

It provides 2 sets of parameter values: 1 horizontal parameters (horizontal), 2. Vertical parameters (vertical). The two sets of parameters are separated directly by the left slash "/". Each set of parameters has 4 parameter values, followed by the shorthand rules for "top right bottom left".

　　/* Value range: The minimum value of any number is 0, the maximum is the side length of the corresponding edge */

2. Now set the Border-radius property on an element in a way that fully enters 2 sets of 8 parameter values.

1 <style type= "Text/css" >2 . Box{3 margin:20px;4 width:200px;5 Height:200px;6 Background-color:#000000;7 Border-radius:100px 60px 40px 10px/20px 40px 60px 80px;8}9 </style>Ten         

You will see the following:

Where horizontal represents a horizontal parameter (hereinafter referred to as h), and vertical represents a vertical parameter (hereinafter referred to as V).

property settings correspond to the values in the figure:

100px 60px 40px 10px/20px 40px 60px 80px;
H_1, h_2, H_3, H_4,/v_1, v_2, V_3, V_4,;

/* and any pair of parameter values (H/V_N) are a pair of radius values.  If two values are equal, a 1/4 circle is cut, and if not equal, a 1/4 ellipse is cut. */

In the upper left corner, for example:

1. Take the top left point as the starting point, offset h_1=100 to the left, offset downward v_1=20, get center O.

2. Then take r_1=h_1=100,r_2=v_1=20, get an ellipse (red area).

3. Take 1/4 ellipse, covering the upper left corner of the element (green area).

A graph of the radii of two concentric circles in an ellipse:

Where: A is a large circle radius, B is a small circle radius. Then the 1/4 of the ellipse is equivalent to the shape of one of the corners of the element being cut.

3. The following is a graph drawn using Border-radius:

1. Positive Circle:

1             {2 width: 100px;          3            height: 100px;  4            background-color: #000000;  5            border-radius: 50px;  6         }

2.1/4 Circle:

1             {2 width: 100px;          3            height: 100px;  4            background-color: #000000;  5            border-radius: 100px 0 0 0;  6         }

3.1/2 Circle:

1             {2 width: 50px;          3            height: 100px;  4            background-color: #000000;  5            border-radius: 50px 0 0 50px;  6         }

4. Ellipse:

        {            width: 100px;             height: 50px;             background-color: #000000;             Border-radius: 50px/25px;        }

5. Egg Type:

1             {2 width: 80px;          3            height: 110px;  4            background-color: #000000;  5            border-radius: 40px/70px 70px 40px 40px;  6         }

The end.

by Little

Brief analysis of CSS3 Border-radius