如何创建带有背景的CSS div/圆角？

Question

我该如何创建下图所示的HTML/CSS样式（圆角，基本背景颜色）：

- genxgeek

Answer 1

使用CSS属性border-radius创建圆角边框：

-moz-border-radius: 5px;    /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px;     /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */

你可以省略前缀，因为Firefox 3.6或旧版本的Webkit浏览器已经几乎消失了。

虽然在OldIE（IE8-）中使用divs+images或PIE.htc可以实现圆角，但我不建议这样做：PIE不是很可靠，在旧版IE中添加多个HTML hack只是浪费时间。

另请参见：MDN：border-radius。

- Rob W

---

实际上，你只需要 border-radius: 5px。所有支持 border-radius 的浏览器的当前版本都已经支持它而无需厂商前缀，并且已经这样做了一段时间。 - thirtydot

在仍然广泛使用的FireFox 3.6中，"-moz-"前缀仍然是必需的。许多用户没有最新版本的浏览器。 - Rob W

你关于“-moz-”是正确的，我没有仔细考虑。 - thirtydot