CSS3之border-radius 参数间的/
W3School学到这个实例：
<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style> </head> <body> <div>border-radius 属性允许您向元素添加圆角。</div> </body> </html>
截止今天中午，我对于border-radius的理解就是下面这样子：
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
尝试运用了，效果是对的。我自以为掌握了border-radius。。。显然，我错了。
但是在学习的过程中我犯了个很大的错误：不知其所以然。
下午看到一个例子，运用到border-radius，并解释了使用。
border-radius 的语法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
border-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>无标题文档</title> <style type="text/css"> div.one { margin:0 auto; width:200px; height:80px; padding:10px; background-color:#CCC; border: solid 1px #333; -moz-border-radius:10px 5px; border-radius:10px 5px;} </style> </head> <body> <div class="one"><p>border-radius</p></div> </body> </html>
结果不是椭圆的角，而是左上和右下角是10px的1/4圆，右上和左下是5px的1/4圆。为什么？我明明是设置了两个参数。
再看语法，汗。。。理解失误！！！
<length>{1,4} [/ <length>{1,4} ]? 两参数之间有/
再试
<!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>无标题文档</title> <style type="text/css"> div.two { margin:0px auto; width:200px; height:80px; padding:10px; background-color:#CCC; border: solid 1px #333; -moz-border-radius:25pt / 55pt; border-radius:25pt / 55pt;} </style> </head> <body> <div class="two"><p>border-radius</p></div> </body> </html>
这样效果出来了。
通过这个问题，受到个教训：学习一定要知其根本。就现在学习CSS来讲，在学习别人实例之前，一定要明白语法。优秀的代码里没有一处是垃圾，是基于标准实现的。
在脚本之家网站有个介绍border-radius的，非常详细。http://www.jb51.net/css/68792.html
