2008-12-12 97 views
10

我需要使用弯角边框构建div,而不使用角落中的任何图像。可能吗?div的弯角边框

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

+1

检查[此文章](http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) - 一个很简单的跨浏览器CSS3代码。 – Shahar 2012-06-12 16:51:16

回答

7

http://www.curvycorners.net/

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

+2

该网站似乎[down](http://www.downforeveryoneorjustme.com/http://www.curvycorners.net)。 [上次项目更新](http://code.google.com/p/curvycorners/source/list)于2011年3月开始。项目位于[Google代码](http://code.google.com/p/curvycorners /)。 – 2012-11-19 23:47:10

6

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

border-radius: 10px; 

Handy Generator

这被称为progressive enhancement。国际海事组织,这比图像和或边界和边界CSS技巧要好。除非你绝对必须有圆角。

9

如果你想依靠WebKit和Mozilla浏览器,你可以使用下面的CSS命令:

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

详情可以查看here。对CSS2规范边界半径

信息可以发现here

这些不幸的是没有为IE浏览器。

只有使用niftycube才能为IE浏览器提供JavaScript路由,这有助于无障碍地支持列高度调平。

0

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