CSS3属性之一：border-radius_HTML5中文网 - 中国领先的HTML5技术门户--HTML5中文学习网

语法：

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

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值：

<length>：: 由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius：: 由浮点数字和单位标识符组成的长度值。不可为负值。

说明：

第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果任意一个值为0，则这个角是矩形，不会是圆的。
值不允许是负值。

　　radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

完整的代码如下：

  <!DOCTYPE html> JyrHTML5中文学习网 - HTML5先行者学习网
  <html> JyrHTML5中文学习网 - HTML5先行者学习网
      <head> JyrHTML5中文学习网 - HTML5先行者学习网
          <meta charset="utf-8"> JyrHTML5中文学习网 - HTML5先行者学习网
          <title>CSS3的border-radius属性</title> JyrHTML5中文学习网 - HTML5先行者学习网
          <style> JyrHTML5中文学习网 - HTML5先行者学习网
          .circle {JyrHTML5中文学习网 - HTML5先行者学习网
              background-color:#f00;JyrHTML5中文学习网 - HTML5先行者学习网
              width: 600px;   /* div的宽和高为600px即正方形的边长为600px */             height: 600px;JyrHTML5中文学习网 - HTML5先行者学习网
             text-align: center;JyrHTML5中文学习网 - HTML5先行者学习网
                     JyrHTML5中文学习网 - HTML5先行者学习网
             -moz-border-radius: 300px;   /* 圆的半径为边长的一半，即300px */JyrHTML5中文学习网 - HTML5先行者学习网
             -webkit-border-radius: 300px;JyrHTML5中文学习网 - HTML5先行者学习网
             border-radius: 300px;JyrHTML5中文学习网 - HTML5先行者学习网
      JyrHTML5中文学习网 - HTML5先行者学习网
             display: -moz-box;JyrHTML5中文学习网 - HTML5先行者学习网
             display: -webkit-box;JyrHTML5中文学习网 - HTML5先行者学习网
             display: box;JyrHTML5中文学习网 - HTML5先行者学习网
      JyrHTML5中文学习网 - HTML5先行者学习网
             -moz-box-orient: horizontal; JyrHTML5中文学习网 - HTML5先行者学习网
             -webkit-box-orient: horizontal;JyrHTML5中文学习网 - HTML5先行者学习网
             box-orient: horizontal;JyrHTML5中文学习网 - HTML5先行者学习网
      JyrHTML5中文学习网 - HTML5先行者学习网
             -moz-box-pack: center;JyrHTML5中文学习网 - HTML5先行者学习网
            -moz-box-align: center;JyrHTML5中文学习网 - HTML5先行者学习网
      JyrHTML5中文学习网 - HTML5先行者学习网
             -webkit-box-pack: center;JyrHTML5中文学习网 - HTML5先行者学习网
             -webkit-box-align: center;      JyrHTML5中文学习网 - HTML5先行者学习网
             box-pack: center;JyrHTML5中文学习网 - HTML5先行者学习网
             box-align: center; JyrHTML5中文学习网 - HTML5先行者学习网
             JyrHTML5中文学习网 - HTML5先行者学习网
             font:normal 80px/100% Arial;JyrHTML5中文学习网 - HTML5先行者学习网
             text-shadow:1px 1px 1px #000;JyrHTML5中文学习网 - HTML5先行者学习网
             color:#fff;JyrHTML5中文学习网 - HTML5先行者学习网
         }JyrHTML5中文学习网 - HTML5先行者学习网
        </style>     JyrHTML5中文学习网 - HTML5先行者学习网
     </head>  JyrHTML5中文学习网 - HTML5先行者学习网
     <body> JyrHTML5中文学习网 - HTML5先行者学习网
         <div class="circle"> JyrHTML5中文学习网 - HTML5先行者学习网
            Hello,World!JyrHTML5中文学习网 - HTML5先行者学习网
         </div>  JyrHTML5中文学习网 - HTML5先行者学习网
     </body> JyrHTML5中文学习网 - HTML5先行者学习网
 </html>

运行效果截图（Chrome）：

接下来用这个属性做一个奥运五环，与前面不同的是，圆环是有边的厚度的，这里用的是相对单位em。代码如下：

   <!DOCTYPE html> JyrHTML5中文学习网 - HTML5先行者学习网
   <html> JyrHTML5中文学习网 - HTML5先行者学习网
       <head> JyrHTML5中文学习网 - HTML5先行者学习网
           <meta charset="UTF-8" /> JyrHTML5中文学习网 - HTML5先行者学习网
           <title>The Olympic Flag</title>  JyrHTML5中文学习网 - HTML5先行者学习网
           <style type="text/css" media="screen"> JyrHTML5中文学习网 - HTML5先行者学习网
           body {JyrHTML5中文学习网 - HTML5先行者学习网
               margin:20px;JyrHTML5中文学习网 - HTML5先行者学习网
               background-color:#efefef;JyrHTML5中文学习网 - HTML5先行者学习网
          }JyrHTML5中文学习网 - HTML5先行者学习网
          ul.flag {JyrHTML5中文学习网 - HTML5先行者学习网
              list-style-type:none;JyrHTML5中文学习网 - HTML5先行者学习网
              position: relative;JyrHTML5中文学习网 - HTML5先行者学习网
              margin: 20px auto;JyrHTML5中文学习网 - HTML5先行者学习网
          } JyrHTML5中文学习网 - HTML5先行者学习网
        JyrHTML5中文学习网 - HTML5先行者学习网
          .flag li, .flag li:before, .flag li:after {JyrHTML5中文学习网 - HTML5先行者学习网
              -webkit-border-radius: 6em;JyrHTML5中文学习网 - HTML5先行者学习网
              -moz-border-radius: 6em;JyrHTML5中文学习网 - HTML5先行者学习网
              border-radius: 6em;JyrHTML5中文学习网 - HTML5先行者学习网
              position: absolute;JyrHTML5中文学习网 - HTML5先行者学习网
          }JyrHTML5中文学习网 - HTML5先行者学习网
          JyrHTML5中文学习网 - HTML5先行者学习网
          .flag li {JyrHTML5中文学习网 - HTML5先行者学习网
              width: 12em;JyrHTML5中文学习网 - HTML5先行者学习网
              height: 12em;JyrHTML5中文学习网 - HTML5先行者学习网
              left: 0;JyrHTML5中文学习网 - HTML5先行者学习网
              top: 0;JyrHTML5中文学习网 - HTML5先行者学习网
              font-size: 1em;JyrHTML5中文学习网 - HTML5先行者学习网
          }  JyrHTML5中文学习网 - HTML5先行者学习网
        JyrHTML5中文学习网 - HTML5先行者学习网
          .flag li:after {JyrHTML5中文学习网 - HTML5先行者学习网
              display: block;JyrHTML5中文学习网 - HTML5先行者学习网
              content: "";JyrHTML5中文学习网 - HTML5先行者学习网
              top: -0.1em;JyrHTML5中文学习网 - HTML5先行者学习网
              left: -0.1em;JyrHTML5中文学习网 - HTML5先行者学习网
              right: -0.1em;JyrHTML5中文学习网 - HTML5先行者学习网
              bottom: -0.1em;JyrHTML5中文学习网 - HTML5先行者学习网
              border: solid 1.4em black;JyrHTML5中文学习网 - HTML5先行者学习网
          }JyrHTML5中文学习网 - HTML5先行者学习网
          JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue   { z-index: 10; left: 0; top: 0; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .black  { z-index: 21; left: 13.6em; top: 0; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red    { z-index: 10; left: 27.2em; top: 0px; }   JyrHTML5中文学习网 - HTML5先行者学习网
          JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue:after   { border-color: blue; }   JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow:after { border-color: yellow; } JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .black:after  { border-color: black; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green:after  { border-color: green; } JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red:after    { border-color: red; }JyrHTML5中文学习网 - HTML5先行者学习网
          /* 蓝色压住黄色 */  JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue.alt { z-index: 24; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue.alt, JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue.alt:before, JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .blue.alt:after {JyrHTML5中文学习网 - HTML5先行者学习网
              border-top-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-left-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-bottom-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
          }JyrHTML5中文学习网 - HTML5先行者学习网
          /* 黄色压住黑色 */JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow.alt { z-index: 23; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow.alt, JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow.alt:before, JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .yellow.alt:after {JyrHTML5中文学习网 - HTML5先行者学习网
              border-right-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-left-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-bottom-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
          }    JyrHTML5中文学习网 - HTML5先行者学习网
          /* 绿色压住黑色  */JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green.alt { z-index: 23; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green.alt,JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green.alt:before,JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .green.alt:after {JyrHTML5中文学习网 - HTML5先行者学习网
              border-top-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-right-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-bottom-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
          }JyrHTML5中文学习网 - HTML5先行者学习网
          /* 红色压住绿色  */JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red.alt { z-index: 23; }JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red.alt, JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red.alt:before,JyrHTML5中文学习网 - HTML5先行者学习网
          .flag .red.alt:after {JyrHTML5中文学习网 - HTML5先行者学习网
              border-top-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-right-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
              border-left-color: transparent;JyrHTML5中文学习网 - HTML5先行者学习网
          }       JyrHTML5中文学习网 - HTML5先行者学习网
          </style>   JyrHTML5中文学习网 - HTML5先行者学习网
      </head> JyrHTML5中文学习网 - HTML5先行者学习网
      <body> JyrHTML5中文学习网 - HTML5先行者学习网
          <ul class="flag"> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="blue"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="blue alt"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="yellow"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="yellow alt"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="black"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="green"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="green alt"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="red"></li> JyrHTML5中文学习网 - HTML5先行者学习网
              <li class="red alt"></li> JyrHTML5中文学习网 - HTML5先行者学习网
         </ul>  JyrHTML5中文学习网 - HTML5先行者学习网
     </body> JyrHTML5中文学习网 - HTML5先行者学习网
 </html>

运行效果截图（Chrome）：