我如何使用CSS创建圆角?
当前回答
如果你要使用边界-半径解决方案,有一个很棒的网站可以生成css,使它适用于safari/chrome/FF。
无论如何,我认为你的设计不应该依赖于圆角,如果你看看Twitter,他们只是对IE和opera用户说F****。圆角是一个很好的选择,我个人认为这是为那些不使用IE的酷用户保留的:)。
当然,这不是客户的意见。 链接如下:http://border-radius.com/
其他回答
Opera目前还不支持border-radius(显然在版本10之后才会支持)。同时,您可以使用CSS设置SVG背景来创建类似的效果。
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.com/
不要使用CSS, jQuery已经被提到过好几次了。如果你需要完全控制你的元素的背景和边界,可以试试jquery背景画布插件。它在背景中放置了一个HTML5 Canvas元素,并允许你绘制你想要的每个背景或边界。圆角,渐变等等。
没有“最好”的方法;有适合你的方法也有不适合你的方法。话虽如此,我在这里发布了一篇关于创建CSS+图像的流畅圆角技术的文章:
使用CSS和图像的圆角盒子-第2部分
这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度),你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度),您需要9个div和9张图像。有些人可能会认为这太复杂了,但恕我直言,这是有史以来最简洁的解决方案。没有黑客,没有JavaScript。