我如何使用CSS创建圆角?
当前回答
除了上面提到的htc解决方案,这里还有其他解决方案和例子来实现IE圆角。
其他回答
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
jQuery是我个人处理这个问题的方法。css的支持是最低限度的,图像太精细,能够选择你想在jQuery圆角的元素对我来说是完美的,即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas
随着对CSS3的支持在Firefox、Safari和Chrome的新版本中实现,看看“边界半径”也会有帮助。
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
像任何其他CSS简写一样,上面也可以用扩展格式编写,从而实现左上角、右下角等不同的边界半径。
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
不要使用CSS, jQuery已经被提到过好几次了。如果你需要完全控制你的元素的背景和边界,可以试试jquery背景画布插件。它在背景中放置了一个HTML5 Canvas元素,并允许你绘制你想要的每个背景或边界。圆角,渐变等等。
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。