CSS3属性：border-radius
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?
相关属性border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
取值：
<length>：由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius：
由浮点数字和单位标识符组成的长度值。不可为负值。
说明：
第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。
用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。
1.下面就做一个的圆。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>CSS3 border-radius</title>
6 <style>
7 .circle {
8 background-color:#008080;
9 width: 400px; /* div的宽和高为400px即正方形的边长为400px */
10 height: 400px;
11 text-align: center;
12
13 -moz-border-radius: 200px; /* 圆的半径为边长的一半，即200px */
14 -webkit-border-radius: 200px;
15 border-radius: 200px;
16
17 display: -moz-box;
18 display: -webkit-box;
19 display: box;
20
21 -moz-box-orient: horizontal;
22 -webkit-box-orient: horizontal;
23 box-orient: horizontal;
24
25 -moz-box-pack: center;
26 -moz-box-align: center;
27
28 -webkit-box-pack: center;
29 -webkit-box-align: center;
30
31 box-pack: center;
32 box-align: center;
33
34 font:normal 80px/100% Arial;
35 text-shadow:1px 1px 1px #000;
36 color:#fff;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="circle">
42 circle
43 </div>
44 </body>
45 </html>
demo:
2.CSS3画个chrome标志
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Chrome LOGO</title>
6 <link href="css/test.css" type="text/css" rel="stylesheet" />
7 <style>
8 *{
9 margin:0;
10 padding:0;
11 }
12 body{
13 width:500px;
14 height:500px;
15 margin:0 auto;
16 }
17 .back{
18 width:440px;
19 height:440px;
20 background:#df2228;
21 position:relative;
22 margin:auto;
23 border-radius:220px;
24 box-shadow:0 0 10px 5px #aaa;
25 }
26 .redwrap,.greenwrap,.yellowwrap{
27 width:396px;
28 height:124px;
29 margin:auto;
30 overflow:hidden;
31 }
32 .greenwrap{
33 -webkit-transform-origin:162px 159px;
34 -webkit-transform:rotate(-120deg);
35 -moz-transform-origin:162px 159px;
36 -moz-transform:rotate(-120deg);
37 -o-transform-origin:162px 159px;
38 -o-transform:rotate(-120deg);
39 }
40 .yellowwrap{
41 -webkit-transform-origin:271px 97px;
42 -webkit-transform:rotate(120deg);
43 -moz-transform-origin:271px 97px;
44 -moz-transform:rotate(120deg);
45 -o-transform-origin:271px 97px;
46 -o-transform:rotate(120deg);
47 }
48 .redwrap div,.greenwrap div,.yellowwrap div{
49 width:440px;
50 height:220px;
51 background:#df2228;
52 border-top-left-radius:220px;
53 border-top-right-radius:220px;
54 margin-left:-21px;
55 }
56 .greenwrap div{
57 background:#4db749;
58 }
59 .yellowwrap div{
60 background:#fcd109;
61 overflow:hidden;
62 }
63 .redpatch{
64 position:absolute;
65 top:0;
66 right:19px;
67 width:198px;
68 height:124px;
69 overflow:hidden;
70 }
71 .redpatch div{
72 background:#df2228;
73 border-top-right-radius:220px;
74 width:220px;
75 height:220px;
76 }
77 .greenpatch{
78 width:199px;
79 height:157px;
80 position:absolute;
81 top:124px;
82 left:220px;
83 background:#4db749;
84 -webkit-transform-origin:96px 153px;
85 -webkit-transform:rotate(-120deg);
86 -moz-transform-origin:96px 153px;
87 -moz-transform:rotate(-120deg);
88 -o-transform-origin:96px 153px;
89 -o-transform:rotate(-120deg);
90 }
91 .yellowpatch{
92 width:199px;
93 height:157px;
94 position:absolute;
95 top:124px;
96 left:220px;
97 background:#fcd109;
98 }
99 .white{
100 width:195px;
101 height:195px;
102 border-radius:195px;
103 background:#e9ebea;
104 position:absolute;
105 top:50%;
106 left:50%;
107 margin-top:-96px;
108 margin-left:-96px;
109 }
110 .blue{
111 width:164px;
112 height:164px;
113 position:absolute;
114 left:50%;
115 top:50%;
116 margin-left:-82px;
117 margin-top:-82px;
118 background:-webkit-linear-gradient(top,#83b4dd,#115b93);
119 background:-moz-linear-gradient(top,#83b4dd,#115b93);
120 background:-o-linear-gradient(top,#83b4dd,#115b93);
121 border-radius:82px;
122 }
123 </style>
124 </head>
125 <body>
126 <div class="back">
127 <div class="redwrap">
128 <div>
129 </div>
130 </div>
131 <div class="greenwrap">
132 <div>
133 </div>
134 </div>
135 <div class="greenpatch">
136 </div>
137 <div class="yellowwrap">
138 <div>
139 </div>
140 </div>
141 <div class="redpatch">
142 <div>
143 </div>
144 </div>
145 <div class="yellowpatch">
146 </div>
147 <div class="white">
148 </div>
149 <div class="blue">
150 </div>
151 </div>
152 </body>
153 </html>
demo：
3.画个圆角
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Border-radius</title> 6 </head> 7 <body> 8 <div style="border-width: 1px; 9 border-style: solid; 10 -moz-border-radius: 11px; 11 -khtml-border-radius: 11px; 12 -webkit-border-radius: 11px; 13 border-radius: 11px; 14 padding:5px;"> in Firefox and Safari border-radius </div> 15 </body> 16 </html>
demo：
参考：
1.http://www.w3cfuns.com/thread-5593371-1-1.html
2.http://www.cnblogs.com/lianjun/archive/2011/03/11/1981606.html
来源：http://www.cnblogs.com/lefan/archive/2013/01/07/2850257.html