使用圓角邊框（border-radius）這個屬性
用法：
圓角邊框的基本用法就是設(shè)置四個相同弧度的圓角
boder-top-left-radius：30px； 左上角
boder-top-right-radius：30px； 右上角
boder-bottom-left-radius：30px； 左下角
boder-bottom-right-radius：30px； 右下角
.div1{
margin: 0 auto;
background: darkcyan;
width: 200px;
height: 200px;
border: 2px solid darkslategray;
border-radius: 30px;
text-align: center;
line-height: 200px;
}
圓角邊框也可以使用百分比作為單位，例如，把一個圓角邊框設(shè)置為50%，就會變成一個圓，但是百分比大于50%之后，形狀就不會變化了。
例子：
css
.box{
width: 200px;
height: 200px;
margin: 30px solid red;
background: bluesky;
border-radius: 50%;
}
html
<div class:"box"></div>
使用圓角邊框也可以畫出一個橢圓
css
.div{
width: 200px;
height: 300px;
border: 2px solid yellow;
background: bluesky;
border-radius: 100px 150px;
}
html
<div class:"div"></div>
遠近互聯(lián)前端小王整理發(fā)布，希望能對學(xué)習技術(shù)的你有所幫助
遠近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
