DIV上的圆角不使用图像

时间:2010-03-01 15:17:47

标签: jquery html css

我尝试使用jquery.corner.js并且它在FF中运行良好,但在IE上,它添加了几个中断并使div看起来“更长”。我找到了几种使用图像对角进行四舍五入的方法,但尝试为每个角创建图像真的很乏味。

有些方法仅适用于FF,Opera(以及其他基于Mozilla的浏览器),但不适用于IE。

有没有办法在不使用图像的情况下在所有浏览器上运行的div /文本框上进行圆角处理?

6 个答案:

答案 0 :(得分:5)

答案 1 :(得分:1)

或者你可以做每个人最终会做的事情,停止婴儿坐着,即。 你想要圆角,将其设置为标准的css规则。 用户浏览即不会从中受益,除非这是一个强烈的要求,它将极大地简化您的工作,并可能帮助人们切换(或至少更新)他们的浏览器。

答案 2 :(得分:1)

查看border radius CSS3 properties

IE不支持此功能,因此请查看SpiffyCorners(只是css)

请记住,不使用图片(对于不支持CSS 3 border-radius的浏览器)意味着您将无法在圆角以外的区域实现透明度。

答案 3 :(得分:0)

http://www.curvycorners.net/

这是一个javascript库,可以从div s手动构建角落的像素。

答案 4 :(得分:0)

我已经查看了几个转角脚本,我还没有找到一个实际适用于我们需要它工作的所有情况的脚本。一旦你开始用你的DOM操作DOM,它们并不总是很好用自己的脚本。

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

答案 5 :(得分:0)

如果您对在IE中创建角落感兴趣,那么这可能有用 - http://css3pie.com/