div的弯角边框

时间:2008-12-12 06:29:03

标签: html css

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

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

5 个答案:

答案 0 :(得分:9)

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

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

可以查看详细信息here

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

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

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

答案 1 :(得分:7)

http://www.curvycorners.net/

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

答案 2 :(得分:6)

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

border-radius: 10px;

Handy Generator

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

答案 3 :(得分:0)

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

答案 4 :(得分:-2)

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

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1