Question

我需要建立一个带有曲角边框的 div，但不能在角落使用任何图片。这个可能吗？

我不想在角落插入弯曲的图像，请帮助我。

Answer 1

如果你想要依赖webkit和mozilla浏览器，你可以使用以下的CSS命令：

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

细节可以在这里查看。

CSS2规范边框半径的信息可以在这里找到。

很遗憾，这些对IE不起作用。

你可以使用niftycube在IE上走JavaScript路线，它还支持无问题的列高度平衡。

Answer 2

http://www.curvycorners.net/ (Note: This is already in English and does not need to be translated into Chinese)

尝试使用这个库，对我产生了惊人的效果！它是一个经过测试的跨浏览器解决方案。

Answer 3

你可以使用CSS在现代浏览器中实现圆角...

border-radius: 10px;

便捷生成器 (Biànjié shēngchéng qì)

这被称为渐进增强。在我看来，这比使用图片或 CSS 技巧带有边距和边框更好，除非你绝对必须要有圆角。

Answer 4

以下是我写的一个代码，如果你喜欢可以使用。它可以生成任意尺寸的圆角矩形框，有背景颜色但没有整个框的边框。它适用于白色页面背景，但可以通过编辑c1、c2和c3样式中的边框颜色来更改。

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
        <div class="inner">
        -- Content Here --
        </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>

Answer 5

我将使用jQuery插件来处理圆角。以下是jQuery网站上可用的圆角插件列表：http://plugins.jquery.com/taxonomy/term/189

友情链接