Question

我正在考虑使用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文件中，而不是像那样用内联编写。

Answer 1

使用CSS3Pie。

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

Answer 2

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

Progressive Internet Explorer

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

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

Answer 3

是的，这样可以正常工作。

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

Answer 4

怀疑它在IE6中有效，但您可以使用以下内容：

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

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

Answer 5

我想这会起作用，并且它与支持IE6一样好。

任何涵盖IE6的解决方案都必定是一个糟糕的黑客攻击。我觉得你真的很想知道你是否真的需要它。我更喜欢使用css圆角，让芯片落在它们可能的位置。

CSS使用Div作为角落的圆角

5 个答案: