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

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

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

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

 
 XML/HTML Code  复制内容到剪贴板 

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


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

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


 
 XML/HTML Code  复制内容到剪贴板 

 
       <!doctype html  >        
        <  html  >       
        <  head  >       
        <  meta     charset  =  "utf-8"  >       
        <  title  >  border-radius  </  HdhCmsTestdztcsd测试数据  /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是向元素添加圆角边框的方法的全部内容了，希望对大家有所帮助，多多支持~

      查看更多关于border-radius是向元素添加圆角边框的方法的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37454

更新时间：2022-09-23 阅读：40次