代码改变世界

CSS border-radius

2013-01-07 22:29  lefan  阅读(435)  评论(0)  编辑  收藏  举报

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