网页设计入门--如何使用css设置圆角
下面是我用html+css执行出来的结果，图片的圆角在不同的位置：
对应的代码如下：
1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 .yuanjiao{ 6 width:400px; 7 height:100px; 8 text-align:center; 9 background:#33CC33; 10 border-radius:15px; 11 margin-bottom:10px; 12 } 13 .yuanjiaozuoshang{ 14 width:400px; 15 height:100px; 16 text-align:center; 17 background:#33CC33; 18 border-top-left-radius:15px; 19 margin-bottom:10px; 20 } 21 .yuanjiaoyoushang{ 22 width:400px; 23 height:100px; 24 text-align:center; 25 background:#33CC33; 26 border-top-right-radius:15px; 27 margin-bottom:10px; 28 } 29 .yuanjiaozuoshangyouxia{ 30 width:400px; 31 height:100px; 32 text-align:center; 33 background:#33CC33; 34 border-radius:15px 0px; 35 margin-bottom:10px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="yuanjiao">圆角</div> 41 <div class="yuanjiaozuoshang">左上圆角</div> 42 <div class="yuanjiaoyoushang">右上圆角</div> 43 <div class="yuanjiaozuoshangyouxia">左上右下圆角</div> 44 </body> 45 </html>
通过以上的代码，大家应该对定义圆角的规则有初步的了解了，下面我就来总结一下定义规则：
一、针对不同的浏览器，css语句不同
1 -moz-border-radius:10px; /*仅firefox支持，实现圆角效果*/ 2 -webkit-border-radius:10px; /*仅safari，chrome支持，实现圆角效果*/ 3 -khtml-border-radius:10px; /*仅safari，chrome支持，实现圆角效果*/ 4 border-radius:10px; /*仅firefox，opera，safari，chrome支持，实现圆角效果*/
目前来说，只需同时设置以下代码即可
-moz-border-radius:10px;
border-radius:10px; /*border-radius必须放在最后声明，否则可能会失效*/
二、border-radius:10px;（圆角半径包括水平半径和垂直半径）
三、圆角总共有四个：左上 右上 右下 左下，这也是我们定义圆角半径的顺序
1、只有一个值，是定义四个圆角半径，如:border-radius:10px;
2、有两个值，第一个值是定义左上和右下，第二个值是定义左下和右上，如:border-radius:10px 15px;
3、有三个值，第一个值是定义左上，第二个值是定义左下和右上，第三个值是定义右下，如:border-radius:10px 15px 8px;
四、我们也可以单独定义一个圆角
1、定义左上圆角，border-top-left-radius:15px;或者-moz-border-radius-topleft:10px;
2、定义右上圆角，border-top-right-radius:15px;或者-moz-border-radius-topright:10px;
3、定义右下圆角，border-bottom-right-radius:15px;或者-moz-border-radius-bottomright:10px;
4、定义左下圆角，border-bottom-left-radius:15px;或者-moz-border-radius-bottomleft:10px;
五、我们也可以对同一个或几个圆角分别定义水平半径和垂直半径
border-radius:10px（水平半径）/15px（垂直半径）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
