CSS3 Border Border-radius

I. Official explanations

Sets or retrieves an object using a rounded border. 2 parameters are provided, 2 parameters are separated by "/", each parameter is allowed to set 1~4 parameter values, the 1th parameter represents the horizontal radius, and the 2nd parameter represents the vertical radius, as the 2nd parameter is omitted, the default equals the 1th parameter.

Horizontal radius: If all four parameter values are supplied, the order of the upper left (top-left), upper right (top-right), lower right (bottom-right), lower left (bottom-left) is used for Four corners.

If only one is provided, it will be used for all four corners.

If two is provided, the first one is for upper left (top-left), lower right (bottom-right), and the second is for upper right (top-right), lower left (bottom-left).

If three is supplied, the first is used on the left (Top-left), the second is for the upper right (top-right), the lower left (Bottom-left), and the third for the bottom right (bottom-right).

The vertical radius also follows the 4 points above.

The corresponding script attribute is Borderradius.

II. Example 2.1 Four parameter values

<div style= "width:100px;height:100px;border:50px solid red;border-radius:50px;" ></div>

<div style= "width:100px;height:100px;border:50px solid red;border-radius:100px;" ></div>

<div style= "width:100px;height:100px;border:50px solid red;border-radius:50px 100px;" ></div>

<div style= "width:100px;height:100px;border:50px solid red;border-radius:10px 30px 50px 100px;" ></div>

So the parameters inside the Border-radius should represent the radius of the circle on the Four corners.

2.2%

<div style= "width:100px;height:100px;border:50px solid red;border-radius:25%;" ></div>

<div style= "width:100px;height:100px;border:50px solid red;border-radius:50%;" ></div>

2.3 Horizontal radius/Vertical radius

<div style= "width:100px;height:200px;border:50px solid red;border-radius:100px/150px;" ></div>

<div style= "width:100px;height:200px;border:50px solid red;border-radius:200px/300px;" ></div>

<div style= "width:100px;height:200px;border:50px solid red;border-radius:200px/200px;" ></div>

The radius here is equal to the width of itself (WIDTH/2) + radius width (BORDER-WIDTH/2) is an ellipse. In addition, the value of the maximum render width (WIDTH/2) + radius width (BORDER-WIDTH/2) of the radius is calculated by the proportional value.

CSS3 Border Border-radius

This article from "Do not know not to ask" blog, please be sure to keep this source http://mazey.blog.51cto.com/12997993/1946539

CSS3 Border Border-radius