css3如何實現圓角邊框

圓角邊框是css3新增屬性，在圓角邊框呈現之前，前端開辟有的采用整塊的圓角圖片作為布景，有的采用小的圓角圖片別離放在元素的四角，很是麻煩，矯捷性差，也達到降低了網站的整體機能，而圓角邊的呈現則降低了開辟和維護的難度。

東西/原料

網頁編纂器
瀏覽器

css3實現圓角邊框

1
圓角邊框（border-radius）的根基用法：
圓角邊框的最根基用法就是設置四個不異弧度的圓角
boder-top-left-radius：30px； //左上角
boder-top-right-radius：30px； //右上角
boder-bottom-left-radius：30px； //右下角
boder-bottom-right-radius：30px； //左下角
若是這四個弧度的圓角不異，可以寫當作：
border-radius：30px；
例子：
css部門：
.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
html部門：
<div class="div1">圓角邊框</div>
結果如圖：
2
圓角邊框也可以利用百分比作為單元，好比：將一個正方形的圓角邊框設置為50%，那么就會形當作一個圓，不外利用百分比與像素并不克不及等效。
注重：百分比年夜于50%后，外形就不會再轉變了，圓角的半徑不克不及跨越寬/高的一半
例子：
css部門：
.box1{
width:200px;
height:200px;
margin: 30px auto;
border: 2px solid #e4007e;
text-align: center;
line-height: 200px;
font-weight: bold;
font-size: 24px;
background: burlywood;
border-radius: 50%;//圓角百分比
}
html部門：
<div class="box1">這是一個圓</div>
結果如圖:
3
既然利用圓角邊框可以繪制出一個圓，同樣也可以繪制出一個橢圓。
例子：
css部門：
.box2{
width:200px;
height:300px;
margin: 30px auto;
border: 2px solid #e4007e;
text-align: center;
line-height: 200px;
font-weight: bold;
font-size: 24px;
background: burlywood;
border-radius: 100px/150px;
}
html部門：
<div class="box2">這是一個橢圓</div>
結果如圖：
4
設置分歧弧度的圓角
例子：
css部門：
#box4{
width:500px;
position: relative;
margin:30px auto;
}
.div4,.div5,.div6,.div7{
width:200px;
height:200px;
text-align: center;
color:seagreen;
font-size: 26px;
line-height: 200px;
background: yellowgreen;
border:2px solid darkslategray;
float:left;
margin:20px;
}
.div4{border-top-left-radius: 40px;}
.div5{border-top-right-radius: 20px;}
.div6{border-bottom-left-radius: 30px;}
.div7{border-bottom-right-radius: 10px;}
HTML部門：
<div id="box4">
<div class="div4">左上角為圓角</div>
<div class="div5">右上角為圓角</div>
<div class="div6">右下角為圓角</div>
<div class="div7">左下角為圓角</div>
</div>
結果如圖：
5
注重，上面例子中，每句圓角邊框代碼都要零丁編寫兼容代碼。
兼容性代碼要如許寫：
.div4{
border-top-left-radius: 40px;
-moz-border-top-left-radius: 40px;
-webkit-border-top-left-radius: 40px;
}
如圖，圖頂用的是Chrome瀏覽器
今朝，ie9+撐持border-radius屬性，Firefox、Chrome、Safari撐持所有新的邊框屬性