我如何使用CSS创建圆角?
当前回答
随着对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;
其他回答
jQuery是我个人处理这个问题的方法。css的支持是最低限度的,图像太精细,能够选择你想在jQuery圆角的元素对我来说是完美的,即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas
总有JavaScript的方式(见其他答案),但因为它是纯粹的样式,我有点反对使用客户端脚本来实现这一点。
我更喜欢的方式(虽然它有其局限性),是使用4圆角图像,你将定位在你的盒子的4个角使用CSS:
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.png');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
如前所述,它有其局限性(圆角框后面的背景应该是普通的,否则角就不会与背景相匹配),但它适用于其他任何东西。
更新:通过使用精灵表改进了实现。
随着对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,如果浏览器不支持他们看到的内容与平角。如果圆角对你的网站不是很重要,你可以使用下面的线条。
如果你想使用相同半径的所有角,这是一个简单的方法:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
但如果你想控制每一个角落,这是很好的:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
正如你所看到的,在每一组中,你都有特定于浏览器的样式,在第四行中,我们以标准的方式声明,我们假设在未来,如果其他人(希望也是IE)决定实现这个功能,让我们的样式也为他们做好准备。
正如在其他回答中所说,这在Firefox, Safari, Camino, Chrome上都能很好地工作。
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser