Grammar
border-radius:length|percentage{1,4}
- Length: Sets the length of the fillet radius of the object. Negative values are not allowed
- Percentage: Sets the fillet radius length of the object in percent. Negative values are not allowed
- {1,4} means that the property supports the 1~4 parameter value;
parameter Interpretation
Browser prefix
- Mozilla (Firefox, Flock and other browsers):-moz-
- WebKit (Safari, Chrome and other browsers):-webkit-
- Opera browser:-o-
- Trident (IE):-ms-
General notation private prefixes before, default attributes after, because page parsing top-down
-moz-border-radius : 10px; -webkit-border-radius : 10px; -o-border-radius : 10px; -ms-border-radius : 10px; border-radius : 10px;
compatibility
Example
##;
#代码
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS rounded corners implementation</title> <style type="Text/css"> /* Square style defines a square to produce a circle: half of the radius equals width or height (border+padding+content) Pay attention to the total size of the block = border (around) +padding (around) +content (around) +margin (around) */ Div { width: px; height: px; background: #000000; padding: . margin:- px; } Div P { text-align: center; color: #5b90e7; font-size: px; font-weight: . line-height: px; } span{display:inline-block;} ul { padding: 0; margin: 0; list-style: none; display: inline-block; } ul Li { float: left; } / * Border-radius * / ul . T11 { border-top-left-radius: px; } ul . T22 { border-top-right-radius: px; } ul . T33 { border-bottom-right-radius: px; } ul . T44 { border-bottom-left-radius: px }ul . T1 { border-radius: px }ul . T2 { border-radius: px ; } ul . T3 { border-radius: px + px}ul . T4 { border-radius: px-px, px, + px; } </style></head><body> <ul> <li> <div class="T11"> <p>border-top-left-radius:125px</P> </div> </li> <li> <div class="T22"> <p>border-top-right-radius:125px</P> </div> </li> <li> <div class="T33"> <p>border-bottom-right-radius:125px</P> </div> </li> <li> <div class="T44"> <p>border-bottom-left-radius:125px</P> </div> </li> </ul> <span>Precise to each part of the angle of the wording</span> <hr> <ul> <li> <div class="T1"> <p>One parameter: all radii equal</P <p>border-radius:125px</P> </div> </li> <li> <div class="T2"> <p>Two parameters: equal diagonally. First parameter: upper left corner = lower right corner; second parameter: upper right corner = lower left corner</P> <p>border-radius:125px 60px;</P> </div> </li> <li> <div class="T3"> <p>Three parameters. First parameter: Upper left corner, second argument: upper right corner = lower left corner, third parameter: lower right corner</P> <p>border-radius:125px 90px 45px</P> </div> </li> <li> <div class="T4"> <p>Four parameters: from the upper left to the lower left corner, clockwise</P> <p>border-radius:125px 90px 45px 20px;</P> </div> </li> </ul> <span>Accurate angle abbreviations for each part</span></body></html>
CSS3 Border rounded corners implementation