我如何使用CSS创建圆角?
当前回答
不久前我写了一篇关于这方面的博客文章,想要了解更多信息,请看这里
<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,这将是官方制作圆角的最佳方法。
其他回答
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。
正如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文件
如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.com/
Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案,适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8),也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。
更新的RUZEE。ShadedBorder是另一个选项,但是它缺乏从CSS中获取样式信息的支持。
没有“最好”的方法;有适合你的方法也有不适合你的方法。话虽如此,我在这里发布了一篇关于创建CSS+图像的流畅圆角技术的文章:
使用CSS和图像的圆角盒子-第2部分
这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度),你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度),您需要9个div和9张图像。有些人可能会认为这太复杂了,但恕我直言,这是有史以来最简洁的解决方案。没有黑客,没有JavaScript。