您的位置首页 >要闻 >

css3圆角属性(css3圆角)

导读 今天来聊聊一篇关于css3圆角属性,css3圆角的文章,网友们对这件事情都比较关注,那么跟随小编一起往下看看吧。 1、圆角边框(border-radiu

今天来聊聊一篇关于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浏览器

本文到此结束,希望对大家有所帮助。

版权声明:本文由用户上传,如有侵权请联系删除!