网页设计入门--如何使用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(垂直半径)

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。