CSS3属性:border-radius
2014-02-12 17:19
573 查看
语法:
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,则这个角是矩形,不会是圆的。
值不允许是负值。
![](http://pic002.cnblogs.com/images/2011/79726/2011031116344481.jpg)
radius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。
下面是一个圆形头像:
<html> <head> <title>圆形头像</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> img.user-avatar { height: 100px; width: 100px; border-radius: 50px; } </style> </head> <body> <img class="user-avatar" src="a.jpg"></img> </body> </html>
效果:
下面就做一个红色的圆。
完整的代码如下:
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:#f00; 9 width: 600px; /* div的宽和高为600px即正方形的边长为600px */ 10 height: 600px; 11 text-align: center; 12 13 -moz-border-radius: 300px; /* 圆的半径为边长的一半,即300px */ 14 -webkit-border-radius: 300px; 15 border-radius: 300px; 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 Hello,World! 43 </div> 44 </body> 45 </html>
运行效果截图(Chrome):
![](http://pic002.cnblogs.com/images/2011/79726/2011031609455187.jpg)
接下来用这个属性做一个奥运五环,与前面不同的是,圆环是有边的厚度的,这里用的是相对单位em。代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>The Olympic Flag</title> 6 <style type="text/css" media="screen"> 7 body { 8 margin:20px; 9 background-color:#efefef; 10 } 11 ul.flag { 12 list-style-type:none; 13 position: relative; 14 margin: 20px auto; 15 } 16 17 .flag li, .flag li:before, .flag li:after { 18 -webkit-border-radius: 6em; 19 -moz-border-radius: 6em; 20 border-radius: 6em; 21 position: absolute; 22 } 23 24 .flag li { 25 width: 12em; 26 height: 12em; 27 left: 0; 28 top: 0; 29 font-size: 1em; 30 } 31 32 .flag li:after { 33 display: block; 34 content: ""; 35 top: -0.1em; 36 left: -0.1em; 37 right: -0.1em; 38 bottom: -0.1em; 39 border: solid 1.4em black; 40 } 41 42 .flag .blue { z-index: 10; left: 0; top: 0; } 43 .flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; } 44 .flag .black { z-index: 21; left: 13.6em; top: 0; } 45 .flag .green { z-index: 20; left: 20.4em; top: 5.7em; } 46 .flag .red { z-index: 10; left: 27.2em; top: 0px; } 47 48 .flag .blue:after { border-color: blue; } 49 .flag .yellow:after { border-color: yellow; } 50 .flag .black:after { border-color: black; } 51 .flag .green:after { border-color: green; } 52 .flag .red:after { border-color: red; } 53 /* 蓝色压住黄色 */ 54 .flag .blue.alt { z-index: 24; } 55 .flag .blue.alt, 56 .flag .blue.alt:before, 57 .flag .blue.alt:after { 58 border-top-color: transparent; 59 border-left-color: transparent; 60 border-bottom-color: transparent; 61 } 62 /* 黄色压住黑色 */ 63 .flag .yellow.alt { z-index: 23; } 64 .flag .yellow.alt, 65 .flag .yellow.alt:before, 66 .flag .yellow.alt:after { 67 border-right-color: transparent; 68 border-left-color: transparent; 69 border-bottom-color: transparent; 70 } 71 /* 绿色压住黑色 */ 72 .flag .green.alt { z-index: 23; } 73 .flag .green.alt, 74 .flag .green.alt:before, 75 .flag .green.alt:after { 76 border-top-color: transparent; 77 border-right-color: transparent; 78 border-bottom-color: transparent; 79 } 80 /* 红色压住绿色 */ 81 .flag .red.alt { z-index: 23; } 82 .flag .red.alt, 83 .flag .red.alt:before, 84 .flag .red.alt:after { 85 border-top-color: transparent; 86 border-right-color: transparent; 87 border-left-color: transparent; 88 } 89 </style> 90 </head> 91 <body> 92 <ul class="flag"> 93 <li class="blue"></li> 94 <li class="blue alt"></li> 95 <li class="yellow"></li> 96 <li class="yellow alt"></li> 97 <li class="black"></li> 98 <li class="green"></li> 99 <li class="green alt"></li> 100 <li class="red"></li> 101 <li class="red alt"></li> 102 </ul> 103 </body> 104 </html>
运行效果截图(Chrome):
![](http://pic002.cnblogs.com/images/2011/79726/2011031609475118.jpg)
相关文章推荐
- CSS3属性之一:border-radius
- CSS3的border-radius属性详解
- CSS3属性之一:border-radius
- CSS3 border-radius 属性
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- 认识CSS3—更容易的网页细节border-radius属性
- css3属性border-radius详解
- CSS3 border-radius属性
- HTML5实践 -- 介绍css3中的几个属性:text-shadow、box-shadow 和 border-radius
- CSS3 border-radius 属性
- CSS3属性border-radius绘制多种多样的图形
- CSS3属性之border-radius
- CSS3属性border-radius参数详解
- CSS3 border-radius 属性学习
- CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
- 用CSS3的圆角border-radius属性,画一个圆形
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
- CSS3 transform-origin & CSS3圆角border-radius属性详解
- CSS3属性之一:border-radius