Question

我需要构建一个带有弯角边框的div，并使用角落中的任何图像。有可能吗？

我不想在角落插入弯曲的图像，请帮我解决这个问题。

Answer 1

如果您想依赖webkit和mozilla浏览器，可以使用以下css命令：

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

可以查看详细信息here。

有关CSS2规范border-radius的信息可以找到here

遗憾的是，这些不适用于ie。

你只能通过使用niftycube来为IE浏览javascript路由，这样可以毫无问题地支持列高度调整。

Answer 2

http://www.curvycorners.net/

试试这个库，它给我带来了奇迹！它是经过测试的跨浏览器解决方案。

Answer 3

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

border-radius: 10px;

Handy Generator

这称为progressive enhancement。 IMO，这比具有边距和边框的图像和CSS技巧更好。除非你绝对必须有圆角。

Answer 4

这是我写的一个，如果你喜欢，欢迎你使用。它呈现任意尺寸的圆角框，背景颜色，但不是整个框的边框。它适用于白页背景，但可以通过编辑c1，c2和amp;中的边框颜色来更改。 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

div的弯角边框

5 个答案: