logo标签列表

不使用图片实现DIV圆角效果

jqueryhtmlcss
7

我尝试使用jquery.corner.js，在火狐浏览器中效果很好，但在IE中会添加几个断点，使得div看起来更长。我发现有一些使用图像来实现圆角的方法，但是为每个角创建图像真的很麻烦。

有一些方法只在FF、Opera（和其他基于Mozilla的浏览器）上有效，但在IE上无法实现。

有没有一种方法可以在所有浏览器上实现圆角而不使用图像？

http://stackoverflow.com/search?q=round+corner - Esteban Küber
@SLaks - 是的，我需要支持IE6。 - Nick
6个回答
5
1

或者你可以做每个人最终都会做的事情，停止宝宝式的看护，也就是说， 如果你想要圆角，将其设置为标准的 CSS 规则。 使用 IE 浏览器的用户不会从中受益，除非这是一个强烈的要求，否则这将大大简化你的工作，并可能帮助人们切换（或至少更新）他们的浏览器。

与主题无关：我绝对认为取消对IE6的支持是一个好主意，尤其是现在连Google也逐渐计划逐步淘汰IE6的支持。然而，7和8也不支持border-radius... - aviraldg
1

看一下边框半径CSS3属性

IE不支持这个，所以也要看一下SpiffyCorners（只是CSS）

请记住，不使用图像（对于不支持CSS 3边框半径的浏览器）意味着您将无法在圆角外部区域实现透明度。

请记住，Opera目前还不支持圆角。而且你可以在不使用图片和border-radius的情况下实现透明效果，例如，请参考http://webdesign.about.com/od/css/a/aa072406.htm（我知道，在HTML中放置一堆`<b>`标签并不符合语义化的要求，但为了获得好的效果，有时候我们必须做出妥协）。 - Marcel Korpel
我刚刚读到Opera 10.5支持圆角。而SpiffyCorners使用的是我链接到的网站相同的技术... - Marcel Korpel
0
你对curvycorners有什么使用经验？它是否跨浏览器兼容，支持IE6和基于Mozilla的浏览器？ - Nick
@user102533：这很不错。在像Webkit和Gecko这样支持本地圆角的浏览器引擎上，curvycorner使用本地圆角。它是跨浏览器兼容的，并且可以在IE6（！）中使用。唯一的问题是如果您需要操作DOM（curvycorner插入的div可能会导致问题）...否则您可以放心使用。 - aviraldg
关于您对操作DOM的评论 - 困难在于找到DOM中的元素（因为curvycorner会插入额外的div）？ - Nick
@user102533：只有在使用绝对DOM引用时才会出现问题，如果使用getElementById或等效方法则不会。此外，它可能会导致使用子代、兄弟选择器的CSS出现问题。（未经证实）我猜测许多div会导致DOM操作方面的开销...但圆角确实很棒，对吧？ - aviraldg
是的，我承认圆角很棒 :) 我想这就是为什么我愿意跳过一堆 hoops 来实现圆角的原因。我会尝试使用 curvycorners，并告诉您效果如何。 - Nick
0

我看过几个圆角脚本，但还没有找到一个能在我们需要的所有情况下都正常工作的。一旦你开始使用自己的脚本操作DOM，它们就不总是表现良好。

最终我回到了图片。我们通过CSS为所有兼容的浏览器设置圆角，然后如果是IE，我们将要设置圆角的元素包装在一个div中，然后绝对定位4个角落的图片。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接