CSS3属性之：border-radius

超、凢脫俗 2022-07-12 02:46 178阅读 0赞

语法：  
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，则这个角是矩形，不会是圆的。  
值不允许是负值。

![20170208090135545][]

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

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

![20170208090230890][]

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

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

![20170208090331189][]

[20170208090135545]: /images/20220711/620d365a40e643009f32facc56afeb67.png
[20170208090230890]: /images/20220711/c206e2e5aa5444419fb7e8cb5ef46ce0.png
[20170208090331189]: /images/20220711/1dd4f7698f624a229d12b0a180888142.png