关于 CSS3 中的圆角介绍

用非 IE 浏览器的朋友可能早就发现了，小站用上了不少 CSS3.0 的样式，包括文字阴影、图片阴影、圆角等效果，在这里 BS IE 的客套话就不多说了，我们直接进入正题。主要是复习一下其中的圆角效果。

虽说 Firefox、Chrome、Opera、Safari 这些浏览器都可以完美地支持 CSS3.0，但是它们各自对圆角的样式写法都各不相同，也可以说这些个浏览器都各自为政，都有自己私有属性，简介如下：

• border-radius:长度
• Firefox支持border-radius(圆角)：-moz-border-radius:2px;
• webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
• Opera支持border-radius(圆角)：border-radius:2px;
• IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在 firefox、webkit 内核的 Safari 和 Chrome 和 opera（css3）、中的具体书写格式如下：

-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

以上转自：border-radius(圆角)-css3演示

这个图截自我的友情链接页面，我用了对称圆角，自我感觉比四个圆角要舒服一点。用非 IE 的朋友应该已经看到过了，这里就让 IE 的用户开开眼吧，劝 IE 的访客早日放弃 IE。

不过传说现在的 IE9 已经支持 CSS3/HTML5 了，可惜我等叉P用户无福享受，不知道现在的 IE9 能否支持圆角？会不会带来新的兼容问题，会不会有新的 HACK 技术出现？IE 总是耍大牌，我们不得不接受。

另外，推荐一个网站：http://roundedcornr.com/，应该算是懒人工具吧，可以帮助你生成圆角样式，不过可不是用 CSS3 哟，而是根据你设置的圆角半径、颜色等自动生成 HTML 和圆角图片，还是挺方便的吧。