css3之圆角样式Border-radius实例教程
在这里给大家做个css3圆角实例。
先看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-radius</title> <style type="text/css"> .test{ width:400px; height:25px; margin:0 auto; border:#dfdfdf 1px solid; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; -webkit-border-radius:3px; border-radius: 3px; padding:5px; text-decoration:inherit; color:#000000;+color:#000000; } </style> </head> <body> <div class="test">在Firefox和Safari 3的浏览器里能看到圆角效果</div> </body> </html>
Border-radius基本用法:
-
水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
-
如果只提供一个,将用于全部的于四个角。
-
如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
-
如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
-
垂直半径也遵循以上4点。
扩展例子1:水平与垂直半径相同时
.test .one{border-radius:10px;} .test .two{border-radius:10px 20px;} .test .three{border-radius:10px 20px 30px;} .test .four{border-radius:10px 20px 30px 40px;}
扩展例子2:水平与垂直半径不同时
.test2 .one{border-radius:10px/5px;} .test2 .two{border-radius:10px 20px/5px 10px;} .test2 .three{border-radius:10px 20px 30px/5px 10px 15px;} .test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
测试浏览器:IE9 Firefox Chrome Safari Opera