使用圆角边框（border-radius）这个属性

用法：

圆角边框的基本用法就是设置四个相同弧度的圆角

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;       

}

圆角边框也可以使用百分比作为单位，例如，把一个圆角边框设置为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>

远近互联前端小王整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。