CSS3 rounded corners_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS3 rounded corners_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:02

Original

996 people have browsed it

CSS3 rounded border-radius is also commonly used. With rounded corners, you can save a lot of pictures :)

Syntax:

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

Note: length cannot be a negative value. border-radius is an abbreviated method. If the values before and after "/" both exist, then the value before "/" sets its horizontal radius, and the value after "/" sets its vertical radius. Without the "/", the horizontal and vertical radii are equal. In addition, its four values are set in the order of top-left, top-right, bottom-right, and bottom-left.

A simple example:

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px;-moz-border-radius:25px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

Copy after login

Picture:

When setting two values, the value of the diagonal Same, top-left and bottom-right take the first value, and the other two corners take the other value.

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px 50px;-moz-border-radius:25px 50px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

Copy after login

Effect:

In addition, you can also set the horizontal and vertical radius of each corner separately:

border-radius:15px 30px / 20px 10px;

Copy after login

Equivalent to:

border-top-left-radius:15px 20px；border-bottom-right-radius:15px 20px;border-top-right-radius:30px 10px;border-bottom-left-radius: 30px 10px;

Copy after login

Effect:

In addition, when the fillet radius is less than or equal to the border thickness, The inner fillet will be square, which is also easy to understand, for example:

border:20px solid #a1a1a1;border-radius:20px;

Copy after login

Effect:

When the fillet radius is greater than When the border thickness is increased, the inside of the border will also have a rounded corner effect:

border:10px solid #a1a1a1;border-radius:20px;

Copy after login

Effect:

You can use rounded corners to draw a circle:

<!DOCTYPE html><html><head><style> #radius{text-align:center;margin:50px auto;width:0;height:0;border:100px solid #a1a1a1;border-radius:100px;}</style></head><body><div id="radius"></div></body></html>

Copy after login

Effect:

Remember the CSS3 Doraemon? It was drawn with a lot of rounded corners.