CSS - 像这样做边框的最佳方式（以网站链接为例）

Question

我需要为我的网站做一个看起来像this的边框。我知道的唯一方法是将网站拆分为9个div，例如：

1 2 3

4 5 6

7 8 9

分别创建8张图片：

• 左上角（ 1 ）
• 顶部中央（ 2 ）
• 右上角（ 3 ）
• 左（在 4 上）
• 右（在 6 上）
• 左下角（ 7 ）
• 底部中心（ 8 ）
• 右下角（ 9 ）

div 5 是主要的尝试。但整个战略看起来并不是那么完善。有小费吗？感谢

Answer 1

您可以使用CSS3：

div {
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

示例：http://jsfiddle.net/nsDRZ/1

适用于所有现代浏览器。对于IE，我建议使用CSS3 Pie：http://css3pie.com/

Answer 2

我要做的是使用两个div（一个用于外边框，一个用于内边框）和css3 border-radius以及一个用于IE的jquery插件。

我推荐的jquery插件是Curvy Corners，它不需要你改变任何东西;只需在css中添加border-radius，只有不支持border-radius的浏览器才会自动使用该插件。

但是无论如何我在我的大多数网站上使用jquery，所以这不是额外的开销。