使用CSS创建圆角[关闭]
-
08-06-2019 - |
题
如何使用 CSS 创建圆角?
解决方案
自从 CSS3 引入以来,使用 CSS 添加圆角的最佳方法是使用 border-radius
财产。你可以 阅读规范 在财产上,或者得到一些 MDN 上有用的实施信息:
如果您使用的浏览器 不 实施 border-radius
(Chrome pre-v4、Firefox pre-v4、IE8、Opera pre-v10.5、Safari pre-v5),然后下面的链接详细介绍了一大堆不同的方法。找到一个适合您的网站和编码风格的工具,然后使用它。
其他提示
我在创建 Stack Overflow 的早期就看过这个,但找不到 任何 创建圆角的方法不会让我感觉就像刚刚走过下水道。
border-radius:
这正是您希望它工作的方式。虽然这在最新版本的 Safari 和 Firefox 中可以正常工作,但在 IE7(我不认为在 IE8 中)或 Opera 中根本不行。
与此同时,一切都在进行黑客攻击。我很想听听其他人认为目前在 IE7、FF2/3、Safari3 和 Opera 9.5 上执行此操作的最简洁的方法。
我通常只使用 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 上运行得很好。
如果您有兴趣在 IE 中创建角落,那么这可能有用 - http://css3pie.com/
我建议使用背景图像。其他方法几乎没有那么好:没有抗锯齿和无意义的标记。这不是使用 JavaScript 的地方。
正如布拉杰什瓦尔所说:使用 border-radius
CSS3 选择器。此时您就可以申请了 -moz-border-radius
和 -webkit-border-radius
分别适用于基于 Mozilla 和 Webkit 的浏览器。
那么,Internet Explorer 会发生什么情况呢?微软有很多行为让Internet Explorer拥有一些额外的功能并获得更多的技能。
这里:A .htc
获取行为文件 round-corners
从 border-radius
CSS 中的值。例如。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
当然,行为选择器并不是一个有效的选择器,但是你可以将它放在带有条件注释的不同css文件中(仅适用于IE)。
随着较新版本的 Firefox、Safari 和 Chrome 实现了对 CSS3 的支持,查看“Border Radius”也会有所帮助。
-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://plugins.jquery.com/project/jquery-roundcorners-canvas
总是有 JavaScript 方式(请参阅其他答案),但由于它纯粹是样式,我有点反对使用客户端脚本来实现此目的。
我更喜欢的方式(尽管它有其局限性)是使用 4 个圆角图像,您将使用 CSS 将它们放置在盒子的 4 个角中:
<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
在 Safari、Chrome、Firefox > 2、IE > 8 和 Konquerer(可能还有其他)中,您可以使用 CSS 来完成此操作 border-radius
财产。由于它尚未正式成为规范的一部分,因此请使用供应商特定的前缀...
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript 解决方案通常会添加一堆小 div
使其看起来圆润,或者使用边框和负边距来制作 1px 的凹角。有些还可能在 IE 中使用 SVG。
IMO,CSS 方式更好,因为它很简单,并且会在不支持它的浏览器中优雅地降级。当然,这仅适用于客户端在不支持的浏览器(例如 IE < 9)中不强制执行它们的情况。
这是我最近做的一个 HTML/js/css 解决方案。IE 中的绝对定位存在 1px 舍入误差,因此您希望容器的宽度为偶数个像素,但它非常干净。
HTML:
<div class="s">Content</div>
jQuery:
$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');
CSS:
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
图像只有 18 像素宽,并且所有 4 个角都挤在一起。看起来像一个圆圈。
笔记:您不需要第二个内部包装器,但我喜欢在内包装器上使用边距,以便段落和标题上的边距仍然保持边距折叠。您也可以跳过 jquery,只将内部包装器放在 html 中。
当然,如果它是固定宽度,那么使用 CSS 就非常容易,而且一点也不冒犯或费力。当你需要它在两个方向上扩展时,事情就会变得不稳定。有些解决方案需要将数量惊人的 div 堆叠在一起才能实现这一点。
我的解决方案是告诉设计师,如果他们想使用圆角(暂时),则它需要是固定宽度。设计师喜欢圆角(我也是),所以我发现这是一个合理的妥协。
鲁兹·博德斯 是我发现的唯一一个基于 Javascript 的抗锯齿圆角解决方案,适用于所有主要浏览器(Firefox 2/3、Chrome、Safari 3、IE6/7/8),而且也是唯一一个在圆形元素和父元素包含背景图像。它还可以处理边框、阴影和发光。
较新的 RUZEE.ShadedBorder 是另一种选择,但它缺乏从 CSS 获取样式信息的支持。
如果您要使用 border-radius 解决方案,可以使用这个很棒的网站来生成 css,使其适用于 safari/chrome/FF。
无论如何,我认为你的设计不应该依赖于圆角,如果你看看 Twitter,他们只是对 IE 和 Opera 用户说 F****。圆角是一个很好的东西,我个人同意为不使用 IE 的酷用户保留它:)。
当然现在这不是客户的意见。链接在这里 : http://border-radius.com/
除了上面提到的 htc 解决方案之外,这里还有另一个解决方案和示例 IE 中的圆角.
没有“最好”的方法;有些方法适合你,有些方法不适合你。话虽如此,我在这里发布了一篇关于创建基于 CSS+Image 的流体圆角技术的文章:
此技巧的概述是使用嵌套 DIV 以及背景图像重复和定位。对于固定宽度布局(固定宽度可拉伸高度),您需要三个 DIV 和三个图像。对于流体宽度布局(可拉伸的宽度和高度),您需要九个 DIV 和九个图像。有些人可能认为它太复杂,但恕我直言,它是有史以来最简洁的解决方案。没有 hack,没有 JavaScript。
我不久前写了一篇关于此的博客文章,因此有关更多信息, 看这里
<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 发布的内容非常相似,但不包含任何 IE 6 特定的 hack,并且经过检查,似乎根本不起作用。另外,另一个技巧是使每个角图像的内部部分透明,这样它就不会遮挡角附近的文本。外部部分不能是透明的,因此它可以覆盖非圆形 div 的边框。
此外,一旦 CSS3 广泛支持 border-radius,这将成为官方制作圆角的最佳方式。
不要使用CSS,jQuery已经被提到过好几次了。如果您需要完全控制元素的背景和边框,请给出jQuery 背景画布插件 尝试一下。它将 HTML5 Canvas 元素放置在背景中,并允许您绘制您想要的每个背景或边框。圆角、渐变等。
Opera 还不支持 border-radius (显然会在版本 10 之后的版本中提供)。在此期间,您可以 使用CSS设置SVG背景来创建类似的效果.