Question

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

如何使用仅 CSS来绕过角落？

Answer 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/

Answer 2

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

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

Answer 3

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

border-radius会让你在Safari 3中找到圆角。有关CSS 3 Spec的border-radius的更多信息。

Answer 4

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

考虑到您尚未使用multiple background images，我认为使用单个图片是最好的仅CSS 选项。

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

Answer 5

向谷歌询问“css圆角没有图像”，你会发现很多很多如何做的例子。

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

Answer 6

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

如何仅使用CSS来绕过我的div标签区域的角落？

6 个答案: