使用 Divs 作为角的 CSS 圆角答案

【问题标题】：CSS Rounded corners using Divs as corners使用 Divs 作为角的 CSS 圆角
【发布时间】：2012-08-27 13:45:35
【问题描述】：

我正在考虑只使用 div 创建一个定制的圆角块，我很想知道你们的想法，如果这是一个足够好的方法，或者有没有更简单的方法来获得跨浏览器支持（同时也支持IE6等老浏览器）

我会写一个简单的解释代码让大家容易理解：

<div class="Block" style="position:relative">
    <div>
    Content will go here or something
    </div>
    <div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
    <div name="TopRight" style="position:absolute;top:0;right:0;"></div>
    <div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
    <div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>

在真正的代码中，我会给每个人一个背景，当然是放在一个css文件中，而不是像这样内联写。

【问题讨论】：

获得可追溯到 IE6 的完整跨浏览器支持的最简单方法是使用图像。
@BillyMoat - 完全相反。我推荐 CSS3Pie。不需要图片。
如果您需要返回那么远，我建议使用 Spiffy Corners：spiffycorners.com
我也强烈建议放弃对 IE6（甚至 IE7）的支持。特别是当涉及到这样不影响可用性的设计装饰时。 IE6 用户已经习惯了看起来不太好的网站。
附注（abit OT 我同意）：考虑一下 IE6 发布于 2001 年和 IE7 发布于 2006 年。然后考虑自 2001 年以来 Web 的演变。

标签： html css web

【解决方案1】：

使用CSS3Pie。

这是一个针对 IE 的 Javascript hack，它在旧版本的 IE 中实现了 border-radius CSS。

【讨论】：

谢谢，我试试看
在已经运行的网站上使用它是否安全？还是我必须解决它会导致的一些问题？
是的，它非常安全。它只在 IE 中加载；其他浏览器完全忽略它。有关更多信息，请参阅 CSS3Pie 网站上的示例和演示。
Coule 请问为什么当我使用 CSS3PIE 查看我的尝试时，IE8 不会显示 box-shadow？ IE7 和 6 确实显示了，再次感谢！
没关系，我想我通过添加 position:relative 解决了这个问题，似乎 div 没有它就消失了

【解决方案2】：

如果您在 IE6-9 浏览器中需要圆角，您只需要使用 CSS3 border-radius 和一个 PIE.htc 文件

Progressive Internet Explorer

div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }

这在所有 IE 浏览器中效果最佳

【讨论】：

是的，馅饼又好又干净。如果我真的无法在 IE9 及更早版本中只给它们方角，我会选择 pie。
IE9 支持border-radius。
在现有网站上使用它是否安全？我不希望这一切都搞砸了
@DOn 您可以随时将 PIE 用于您的网站。没有伤害 :) 只记得添加行为属性

【解决方案3】：

是的，那会很好。

您还可以使用脚本添加元素，这将使标记更清晰。我在这里使用这种方法：bytbil.com

【讨论】：

【解决方案4】：

怀疑它是否可以在 IE6 中运行，但您可以使用以下内容：

-moz-border-radius: 15px;
border-radius: 15px;

把它放在你的 DIV 的 CSS 中，它将支持大多数浏览器，但同样，不确定 IE6...它确实适用于 IE9、Safari (5+)、FireFox(1.0+)、Chrome(5 +) 和 Opera(10.5+)...

【讨论】：

IE6肯定不支持这个
是的，IE6已经过时了，我个人好久没用了（电脑时间：P）
在 IE6 上不行，这就是我问我上面写的代码的原因。谢谢朋友
@Don 如果它必须是 IE6，那么我建议使用 3x3 网格中的图像，您的内容在中间。然后你可以在角落使用曲线，在顶部和底部使用水平线，在侧面使用垂直线。只要让他们都排成一排，你就可以走了。（水平线和垂直线可以是重复的背景，因此它们可以根据需要增长）。

【解决方案5】：

我想这会起作用，而且支持 IE6 和任何东西一样好。

任何涵盖 IE6 的解决方案都注定是一个糟糕的 hack。我认为怀疑你是否真的需要它真的很值得。我宁愿只使用 css 圆角，让芯片掉到可能的地方。

【讨论】：