border

border-radius:10px; /* 全部角都应用半径为10px的圆角 */

border-radius: 5px 4px 3px 2px; /* 4个半径值各自是左上角、右上角、右下角和左下角，顺时针 */

不必认为border-radius的值只能用px企业，你还能够用百分比或em，但适配性现阶段还不大好。

实心上半圆：

方式：把高宽比(height)设为宽度(width)的1半，而且只设定左上角和右上角的半径与元素的高宽比1致(超过也是能够的)。

XML/HTML Code拷贝內容到剪贴板
  1. div{   
  2.   
  3. 　　height:50px;/*是width的1半*/   
  4.   
  5. 　　width:100px;   
  6.   
  7. 　　background:#9da;   
  8.   
  9. 　　border-radius:50px 50px 0 0;/*半径最少设定为height的值*/   
  10.   
  11. 　　}  

实心圆：

方式：把宽度(width)与高宽比(height)值设定为1致(也便是正方形)，而且4个圆角值都设定为它们值的1半。

以下编码：

CSS Code拷贝內容到剪贴板
  1. div{   
  2.   
  3. 　　height:100px;/*与width设定1致*/  
  4.   
  5. 　　width:100px;   
  6.   
  7. 　　background:#9da;   
  8.   
  9. 　　border-radius:50px;/*4个圆角值都设定为宽度或高宽比值的1半*/  
  10.   
  11. 　　}   
XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf⑻">  
  5. <title>border-radius</www.dztcsd.com/title>  
  6. <style type="text/css">  
  7. div.circle{   
  8.     height:100px;/*与width设定1致*/   
  9.     width:100px;   
  10.     background:#9da;   
  11.     border-radius:50px;/*4个圆角值都设定为宽度或高宽比值的1半*/   
  12.     }   
  13. /*每日任务一部分*/      
  14. div.semi-circle{    
  15.     height:100px;   
  16.     width:50px;   
  17.     background:#9da;   
  18.     border-radius:?;   
  19.     }   
  20.       
  21. </style>  
  22. </head>  
  23. <body>  
  24. <div class="circle">  
  25. </div>  
  26. <br/>  
  27. <!--每日任务一部分-->  
  28. <div class="semi-circle">  
  29. </div>  
  30.   
  31. </body>  
  32. </html>  

以上便是网编为大伙儿带来的border-radius是向元素加上圆角边框的方式的所有內容了，期待对大伙儿有一定的协助，多多适用脚本制作之家~