我如何使用CSS创建圆角?
当前回答
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
其他回答
正如Brajeshwar所说:使用border-radius css3选择器。现在,您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。
那么,ie浏览器会发生什么呢?微软有许多行为使ie浏览器有一些额外的功能,并获得更多的技能。
这里:一个.htc行为文件,用于从CSS中的border-radius值获取圆角。为例。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然,行为选择器不是一个有效的选择器,但你可以把它放在一个不同的css文件与条件注释(仅适用于IE)。
行为HTC文件
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;
}
如前所述,它有其局限性(圆角框后面的背景应该是普通的,否则角就不会与背景相匹配),但它适用于其他任何东西。
更新:通过使用精灵表改进了实现。
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
不久前我写了一篇关于这方面的博客文章,想要了解更多信息,请看这里
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
它运行得很好。不需要Javascript,只需CSS和HTML。用最小的HTML干扰其他东西。它与Mono发布的非常相似,但不包含任何ie6的特定hack,经过检查,似乎根本不起作用。另外,另一个技巧是使每个角落图像的内部部分透明,这样它就不会挡住角落附近的文本。外部部分不能是透明的,这样可以掩盖非圆角div的边框。
此外,一旦CSS3广泛支持border-radius,这将是官方制作圆角的最佳方法。