CSS3之Border-radius
2014-02-22 21:35
309 查看
1、属性介绍
border-radius:none|12.3px,取值不可为负数,表示边框圆角
相关属性:border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
2、版本兼容性
(1)IE不兼容
(2)火狐2.0不兼容
(3)Opera 9.64不兼容
(4)Chrome 1.0.x和2.0.x兼容
3、属性实例
4、浏览器运行结果
border-radius:none|12.3px,取值不可为负数,表示边框圆角
相关属性:border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
2、版本兼容性
(1)IE不兼容
(2)火狐2.0不兼容
(3)Opera 9.64不兼容
(4)Chrome 1.0.x和2.0.x兼容
3、属性实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3之Border-radius</title> <style type="text/css"> body{ width:50%; height:100%; font-size:14px; } div{ width:100%; height:100px; text-align:center; vertical-align:middle; alignment-adjust:after-edge; alignment-baseline:after-edge; font-family:Tahoma, Geneva, sans-serif; border-style:solid; border-width:thick; -moz-border-radius:12px; -webkit-border-radius:20px; -moz-border-radius-bottomleft:12px; -webkit-border-bottom-left-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px; -moz-border-radius-topright:12px; -webkit-border-top-right-radius:12px; } </style> </head> <body> <div> 设置边框四方向的圆角 </div> </body> </html>
4、浏览器运行结果
相关文章推荐
- CSS3属性border-radius绘制多种多样的图形
- css3のborder-radius
- CSS3之Border-radius
- CSS3 圆角(border-radius)
- CSS3 圆角(border-radius)
- CSS3的圆角Border-radius
- CSS3笔记:Border-radius的形成原理
- border-radius版本:CSS3继承性:无
- css3的border-radius属性使用方法
- CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
- IE兼容CSS3圆角border-radius的方法
- 让IE6也识别CSS3-圆角效果应用border-radius
- IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)
- CSS3中的border-radius兼容IE低版本解决方法
- CSS3简明教程-2.2.CSS3边框之 圆角border-radius
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解
- CSS3 border-radius 属性
- css3深入理解之border-radius
- CSS3 border-radius实现边框圆角
- 用CSS3的 border-radius 来轻松实现图层圆角