首頁 >web前端 >html教學 >border-radius怎樣為元素加上圓角邊框

border-radius怎樣為元素加上圓角邊框

php中世界最好的语言原創: 2018-01-20 09:35:222255瀏覽

這次帶給大家border-radius怎樣給元素添加圓角邊框，給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>

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！