今天来聊聊一篇关于css3圆角属性，角属css3圆角的圆圆角文章，网友们对这件事情都比较关注，角属那么跟随小编一起往下看看吧。圆圆角

1、角属圆角边框（border-radius）的圆圆角基本用法：

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

3、boder-top-left-radius：30px； //左上角

4、圆圆角boder-top-right-radius：30px； //右上角

5、角属boder-bottom-left-radius：30px； //右下角

6、圆圆角boder-bottom-right-radius：30px； //左下角

7、如果这四个弧度的圆角相同，可以写成：

8、border-radius：30px；

9、例子：

10、css部分：

11、.div1{

12、 margin:0 auto;

13、 background: darkcyan;

14、 width:200px;

15、 height:200px;

16、 border:2px solid darkslategray;

17、 border-radius:30px;

18、 text-align: center;

19、 line-height: 200px;

20、 }

21、html部分：

22、<div class="div1">圆角边框</div>

23、效果如图：

24、圆角边框也可以使用百分比作为单位，比如：将一个正方形的圆角边框设置为50%，那么就会形成一个圆，不过使用百分比与像素并不能等效。

25、注意：百分比大于50%后，形状就不会再变化了，圆角的半径不能超过宽/高的一半

26、例子：

27、css部分：

28、.box1{

29、 width:200px;

30、 height:200px;

31、margin: 30px auto;

32、 border: 2px solid #e4007e;

33、 text-align: center;

34、 line-height: 200px;

35、 font-weight: bold;

36、 font-size: 24px;

37、background: burlywood;

38、 border-radius: 50%;//圆角百分比

39、 }

40、html部分：

41、<div class="box1">这是一个圆</div>

42、效果如图:

43、既然使用圆角边框可以绘制出一个圆，同样也可以绘制出一个椭圆。

44、例子：

45、css部分：

46、.box2{

47、 width:200px;

48、 height:300px;

49、margin: 30px auto;

50、 border: 2px solid #e4007e;

51、 text-align: center;

52、 line-height: 200px;

53、 font-weight: bold;

54、 font-size: 24px;

55、background: burlywood;

56、 border-radius: 100px/150px;

57、 }

58、html部分：

59、<div class="box2">这是一个椭圆</div>

60、效果如图：

61、设置不同弧度的圆角

62、例子：

63、css部分：

64、#box4{

65、 width:500px;

66、 position: relative;

67、 margin:30px auto;

68、 }

69、 .div4,.div5,.div6,.div7{

70、 width:200px;

71、 height:200px;

72、 text-align: center;

73、 color:seagreen;

74、 font-size: 26px;

75、 line-height: 200px;

76、 background: yellowgreen;

77、 border:2px solid darkslategray;

78、 float:left;

79、 margin:20px;

80、 }

81、 .div4{ border-top-left-radius: 40px;}

82、 .div5{ border-top-right-radius: 20px;}

83、 .div6{ border-bottom-left-radius: 30px;}

84、 .div7{ border-bottom-right-radius: 10px;}

85、HTML部分：

86、<div id="box4">

87、 <div class="div4">左上角为圆角</div>

88、 <div class="div5">右上角为圆角</div>

89、 <div class="div6">右下角为圆角</div>

90、 <div class="div7">左下角为圆角</div>

91、 </div>

92、效果如图：

93、注意，上面例子中，每句圆角边框代码都要单独编写兼容代码。

94、兼容性代码要这样写：

95、.div4{

96、 border-top-left-radius: 40px;

97、 -moz-border-top-left-radius: 40px;

98、 -webkit-border-top-left-radius: 40px;

99、 }

100、如图，图中用的是Chrome浏览器