我们的目标就是做这个 button 哦，想想看，你会怎么做？先用 Photoshop 做好框？还是用做成四个角的图片，然后用复杂的多层级 div 来实现？
如果真的使用后者的方法，会用多少的div，多少的css呢？
CSS 3 为我们带来了好消息，我们可以不用那么麻烦的设计圆角框了。
先看看一个 button HTML 代码，（注：理论上支持任何一个HTML元素）
- <input type="button" class="button" />
因为我会在 CSS 为它 define 一个 button 的 css class
CSS代码如下：
- .button {
- border:#666 solid 1px;
- background:#E9E9E9;
- -moz-border-radius:5px;
- -webkit-border-radius:5px;
- font-weight:bold;
- }
接下来，第二行，我定义了背景颜色。
第三行和第四行就是核心了，CSS 3 支持的新代码，设计圆角的半径。
err...
你或许会问：为什么要两行呢？ -moz-border-radius 和 -webkit-border-radius 有点相似的呢？
我要告诉你的是，由于目前 CSS 3 只被部分现代浏览器 (modern browser) 所支持，如 (Google Chrome, Mozilla Firefox 3.6, Apple Safari，注 Microsoft Internet Explorer 只有在最新版 Version 9 的时候才支持)。
-moz 开头的是 mozilla 支持的，-webkit 开头的是 apple 支持的。
相信你能从这里领悟到更多东西，激发你的创意，创造出更美好的东西，清心期待你的作品！
如果能帮到你的话，请回复一下，一起讨论吧！
