CSS3属性之:border-radius
来源:互联网 发布:传奇3数据库 编辑:程序博客网 时间:2024/05/22 23:27
语法:
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:
由浮点数字和单位标识符组成的长度值。不可为负值。
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,则这个角是矩形,不会是圆的。
值不允许是负值。
如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
如果任意一个值为0,则这个角是矩形,不会是圆的。
值不允许是负值。
radius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3的border-radius属性</title> <style> .circle { background-color:#f00; width: 600px; /* div的宽和高为600px即正方形的边长为600px */ height: 600px; text-align: center; -moz-border-radius: 300px; /* 圆的半径为边长的一半,即300px */ -webkit-border-radius: 300px; border-radius: 300px; display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; font:normal 80px/100% Arial; text-shadow:1px 1px 1px #000; color:#fff; } </style> </head> <body> <div class="circle"> Hello,World! </div> </body> </html>
接下来用这个属性做一个奥运五环,与前面不同的是,圆环是有边的厚度的,这里用的是相对单位em。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>The Olympic Flag</title> <style type="text/css" media="screen"> body { margin:20px; background-color:#efefef; } ul.flag { list-style-type:none; position: relative; margin: 20px auto; } .flag li, .flag li:before, .flag li:after { -webkit-border-radius: 6em; -moz-border-radius: 6em; border-radius: 6em; position: absolute; } .flag li { width: 12em; height: 12em; left: 0; top: 0; font-size: 1em; } .flag li:after { display: block; content: ""; top: -0.1em; left: -0.1em; right: -0.1em; bottom: -0.1em; border: solid 1.4em black; } .flag .blue { z-index: 10; left: 0; top: 0; } .flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; } .flag .black { z-index: 21; left: 13.6em; top: 0; } .flag .green { z-index: 20; left: 20.4em; top: 5.7em; } .flag .red { z-index: 10; left: 27.2em; top: 0px; } .flag .blue:after { border-color: blue; } .flag .yellow:after { border-color: yellow; } .flag .black:after { border-color: black; } .flag .green:after { border-color: green; } .flag .red:after { border-color: red; } /* 蓝色压住黄色 */ .flag .blue.alt { z-index: 24; } .flag .blue.alt, .flag .blue.alt:before, .flag .blue.alt:after { border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; } /* 黄色压住黑色 */ .flag .yellow.alt { z-index: 23; } .flag .yellow.alt, .flag .yellow.alt:before, .flag .yellow.alt:after { border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; } /* 绿色压住黑色 */ .flag .green.alt { z-index: 23; } .flag .green.alt, .flag .green.alt:before, .flag .green.alt:after { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } /* 红色压住绿色 */ .flag .red.alt { z-index: 23; } .flag .red.alt, .flag .red.alt:before, .flag .red.alt:after { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; } </style> </head> <body> <ul class="flag"> <li class="blue"></li> <li class="blue alt"></li> <li class="yellow"></li> <li class="yellow alt"></li> <li class="black"></li> <li class="green"></li> <li class="green alt"></li> <li class="red"></li> <li class="red alt"></li> </ul> </body> </html>
1 0
- CSS3属性之border-radius
- css3属性之border-radius
- CSS3属性之border-radius
- CSS3属性之:border-radius
- CSS3 border-radius 属性
- CSS3 border-radius 属性
- CSS3 border-radius属性
- CSS3 border-radius属性
- CSS3之Border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- CSS3属性之一:border-radius
- css3属性border-radius详解
- CSS3 border-radius 属性学习
- CSS3 圆角属性 border-radius
- CSS3 border-top-left-radius属性
- 51单片机复位电路原理
- JAVASCRIPT之子窗口与父窗口的互调
- golang与java间的json-rpc跨语言调用
- 1路AD数码管显示
- 解决Tomcat: Can't load IA 32-bit .dll on a AMD 64-bit platform问题
- CSS3属性之:border-radius
- 设计模式之适配器模式
- MySQL笔记五之 日期和时间函数
- iOS好用的文章链接
- java的一些基础知识总结
- Android 全屏无标题栏的三种实现方法
- 2016回顾与总结
- Android 四大基本组件之ContentProvider(查询单个)
- 牛人博客