Home > Article > Web Front-end > CSS3 rounded corners_html/css_WEB-ITnose
CSS3 rounded corners_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:02979browse
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} [/ d82af2074b26fcfe177e947839b5d381{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> 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> Effect:
In addition, you can also set the horizontal and vertical radius of each corner separately:
border-radius:15px 30px / 20px 10px;
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;
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;
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;
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> Effect:
Remember the CSS3 Doraemon? It was drawn with a lot of rounded corners.