如何仅使用 CSS 来圆我的 div 标签区域的角？答案

【问题标题】：How to use only CSS to round my div tag area's corners?如何仅使用 CSS 来圆我的 div 标签区域的角？
【发布时间】：2010-09-20 17:29:09
【问题描述】：

我使用 div 标签来定义网页中的区域。我设置了所有明显的东西，比如背景、大小、填充等。但它都是非常方正的。

如何使用only CSS 来圆角？

【问题讨论】：

标签： html css

【解决方案1】：

这里有一个简单的 HTML 文档来演示如何仅通过 CSS 来实现。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <style>
        .b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
        </style>
    </head>
    <body>
            <b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
            <div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area 
Content Area Content Area Content Area Content Area Content Area Content Area 
Content Area Content Area Content Area Content Area Content Area Content Area 
            </div>
            <b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
    </body>
</html>

原文链接：http://blog.yosle.com/2007/09/20/css-round-corners/

【讨论】：

【解决方案2】：

您将使用border-radius 属性。但是，这仅在 CSS3 中受支持，尚无浏览器实现。如果你只需要它在几个浏览器中工作，你可以使用 -webkit-border-radius 和 -moz-border-radius 让它分别在 Safari 和 Firefox 中工作。

如果您不反对使用图像。这是我为making rounded borders 想出的方法。

【讨论】：

我们错过了浏览器中的那个功能......;(
虽然这个答案是正确的，但我看不出它对今天的 Web 开发人员/设计师来说有多实用。
在下面查看我的答案，了解今天可以跨浏览器使用的答案
这很实用，因为如果您想要没有图像的圆角边框，如果不在页面中插入大量额外的 HTML，您将不会走得太远。
@Zack：实际上是这样。许多专业（而且很好！）网络开发人员已经在使用它。一个例子：推特页面。多亏了优雅的降级，这不是一个真正的问题。

【解决方案3】：

-moz-border-radius 将在所有版本的 Firefox 中为您提供圆角。更多有用信息请访问Sitepoint CSS Reference。

border-radius 将在 Safari 3 中为您提供圆角。有关边界半径的更多信息，请访问 CSS 3 Spec。

【讨论】：

【解决方案4】：

如果“仅 CSS”是指“没有 JavaScript”，那么您当然可以在元素中添加带圆角的背景图片。在这种情况下，您可能需要额外的标记，具体取决于您需要多大的灵活性。

考虑到您还不能使用multiple background images，我认为使用单个图像是最好的仅CSS选项。

如果您可以使用 JavaScript，那么您可能需要查看Nifty Corners Cube。我之所以提到这一点，是因为它甚至可以在图像之上工作并支持透明度。

【讨论】：

【解决方案5】：

向 google 询问“css 圆角无图像”，您会发现很多很多示例。

就个人而言，我喜欢基于操纵边距来逐行绘制曲线的方法，尽管它们会在页面源中产生大量噪音，因为它们是最灵活的并且可以绘制任何形状的边缘。如果您只对实际的圆角感兴趣（即，使用 90 度圆弧），则有一个更紧凑的解决方案，该解决方案基于一些巧妙定位的子弹。

【讨论】：

【解决方案6】：

http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ 中有一个教程解释了如何在图像中设置圆角边框。 Peharps 它可能对您有用，因为图像被设置为 div 的背景。尽管您将需要使用其他图像和 javascript。如果您使用 JQuery，javascript 代码可能会减少。 o/

【讨论】：