明天来聊聊一篇对于css3圆角属性，角属css3圆角的圆圆角文章，网友们对于这件使命都比力关注，角属那末追寻小编一起往下看看吧。圆圆角
一、角属圆角边框（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;
1三、 background: darkcyan;
1四、 width:200px;
1五、 height:200px;
1六、 border:2px solid darkslategray;
1七、 border-radius:30px;
1八、 text-align: center;
1九、 line-height: 200px;
20、 }
2一、html部份：
2二、<div class="div1">圆角边框</div>
2三、下场如图：
2四、圆角边框也可能运用百分比作为单元，好比：将一个正方形的圆角边框配置为50%，那末就会组成一个圆，不外运用百分比与像素并不能等效。
2五、留意：百分比大于50%后，形态就不会再变更了，圆角的半径不能逾越宽/高的一半
2六、例子：
2七、css部份：
2八、.box1{
2九、 width:200px;
30、 height:200px;
3一、margin: 30px auto;
3二、 border: 2px solid #e4007e;
3三、 text-align: center;
3四、 line-height: 200px;
3五、 font-weight: bold;
3六、 font-size: 24px;
3七、background: burlywood;
3八、 border-radius: 50%;//圆角百分比
3九、 }
40、html部份：
4一、<div class="box1">这是一个圆</div>
4二、下场如图:
4三、既然运用圆角边框可能绘制出一个圆，同样也可能绘制出一个椭圆。
4四、例子：
4五、css部份：
4六、.box2{
4七、 width:200px;
4八、 height:300px;
4九、margin: 30px auto;
50、 border: 2px solid #e4007e;
5一、 text-align: center;
5二、 line-height: 200px;
5三、 font-weight: bold;
5四、 font-size: 24px;
5五、background: burlywood;
5六、 border-radius: 100px/150px;
5七、 }
5八、html部份：
5九、<div class="box2">这是一个椭圆</div>
60、下场如图：
6一、配置差距弧度的圆角
6二、例子：
6三、css部份：
6四、#box4{
6五、 width:500px;
6六、 position: relative;
6七、 margin:30px auto;
6八、 }
6九、 .div4,.div5,.div6,.div7{
70、 width:200px;
7一、 height:200px;
7二、 text-align: center;
7三、 color:seagreen;
7四、 font-size: 26px;
7五、 line-height: 200px;
7六、 background: yellowgreen;
7七、 border:2px solid darkslategray;
7八、 float:left;
7九、 margin:20px;
80、 }
8一、 .div4{ border-top-left-radius: 40px;}
8二、 .div5{ border-top-right-radius: 20px;}
8三、 .div6{ border-bottom-left-radius: 30px;}
8四、 .div7{ border-bottom-right-radius: 10px;}
8五、HTML部份：
8六、<div id="box4">
8七、 <div class="div4">左上角为圆角</div>
8八、 <div class="div5">右上角为圆角</div>
8九、 <div class="div6">右下角为圆角</div>
90、 <div class="div7">左下角为圆角</div>
9一、 </div>
9二、下场如图：
9三、留意，下面例子中，每一句圆角边框代码都要径自编写兼容代码。
9四、兼容性代码要这样写：
9五、.div4{
9六、 border-top-left-radius: 40px;
9七、 -moz-border-top-left-radius: 40px;
9八、 -webkit-border-top-left-radius: 40px;
9九、 }
100、如图，图中用的是Chrome浏览器
本文到此停止，愿望对于巨匠有所辅助。