即:
Firefox支持border-radius(圆角):-moz-border-radius:10px;
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:10px;
Opera支持border-radius(圆角):border-radius:10px;
IE9之前不支持,IE9之后都支持border-radius(圆角)
效果图:(IE和遨游不支持!)
![](http://hiphotos.baidu.com/zg1989bd/pic/item/3e08da8a2a2e702dc8fc7afd.jpg)
代码:
<!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>圆角效果border-radius</title> <style type="text/css"> body,div{margin:0;padding:0;} .border{width:200px;border:10px solid gray;height:20px; border-radius:10px;//IE9之后都支持
-moz-border-radius:10px;/*仅Firefox支持,实现圆角效果*/ -webkit-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/ -khtml-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/ border-radius:10px;/*仅Opera,Safari,Chrome支持,实现圆角效果*/ } </style> </head> <body> <div class="border">border radius</div> </body> </html>
再此我们还可以随意指定圆角的位置,上左,上右,下左,下右四个方向。
在firefox、webkit内核的Safari,Chrome和 Opera的具体书写格式如下:
上左效果:
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左
上右效果:
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右
下左效果:
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左
下右效果:
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右
然后我们可以做些效果:
例如常见的 标题栏 仅仅需要在上面用到圆角效果,如图:
代码 :
<!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>圆角效果border-radius</title> <style type="text/css"> .border{width:120px;border:15px solid gray;height:20px; background:gray;color:#fff; -moz-border-radius-topright:15px; -moz-border-radius-topleft:15px; -webkit-border-top-right-radius:15px; -webkit-border-top-left-radius:15px; border-top-right-radius:15px; border-top-left-radius:15px; } </style> </head> <body> <div class="border">border radius</div> </body> </html>
代码:
<!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>圆角效果border-radius</title> <style type="text/css"> .border{width:120px;border:15px solid gray;height:20px; background:gray;color:#fff; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-left-radius:15px; border-top-right-radius:15px; border-bottom-left-radius:15px; } </style> </head> <body> <div class="border">border radius</div> </body> </html>
万变不离其宗,仅仅需要改下的border-radius的方向,就可以实现一些很有用的效果,代码变的越来越简单。