border-radius是向元素添加圆角边框的方法

飞奔的炮台

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

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

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。
实心上半圆：
方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

div{  
     
  height:50px;/*是width的一半*/  
     
  width:100px;  
     
  background:#9da;  
     
  border-radius:50px 50px 0 0;/*半径至少设置为height的值*/  
     
  }

实心圆：
方法：把宽度(width)与高度(height)值设置为一致(也就是正方形)，并且四个圆角值都设置为它们值的一半。
如下代码：

div{  
     
  height:100px;/*与width设置一致*/   
     
  width:100px;  
     
  background:#9da;  
     
  border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   
     
  }

<!doctype html>   
  <html>   
  <head>   
  <meta charset="utf-8">   
  <title>border-radius</www.dztcsd.com/title>   
  <style type="text/css">   
  div.circle{  
    height:100px;/*与width设置一致*/  
    width:100px;  
    background:#9da;  
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/  
    }  
  /*任务部分*/     
  div.semi-circle{   
    height:100px;  
    width:50px;  
    background:#9da;  
    border-radius:?;  
    }  
       
  </style>   
  </head>   
  <body>   
  <div class="circle">   
  </div>   
  <br/>   
  <!--任务部分-->   
  <div class="semi-circle">   
  </div>   
     
  </body>   
  </html>

以上就是小编为大家带来的border-radius是向元素添加圆角边框的方法的全部内容了，希望对大家有所帮助，多多支持CodeAE代码之家~

[Html/CSS] border-radius是向元素添加圆角边框的方法

相关帖子

html设置虚线边框的方法

WPS Excel给单元格设置自动添加边框方法

如何在Word文档中编辑边框和底纹？

jsp中使用frameset框架边框固定不让更改边框的大小

无边框窗口代码详解

PHP使用 Imagick 扩展实现图片合成，圆角处理功能示例

css中padding与margin的奥秘

如何缩小安全漏洞爆炸半径，实现服务间零信任安全？

Android 图片设置圆角

怎么把图片弄成圆角？不需要会PS 超简单制作圆角照片方法

飞奔的炮台 LV3