CSS使用Divs作为角的圆角

我正在考虑使用div创建一个自定义的圆角块，我很想知道你们的想法，如果这是一个足够好的方法，或者有更简单的方法获得跨浏览器支持（同时还配套较旧的浏览器，如IE6）CSS使用Divs作为角的圆角

我会写一点点简单的解释代码，你们很容易理解：

<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文件中，而不是像这样内联写入。

来源

2012-08-27 Radicate

获得完全跨浏览器支持的最简单方法就像IE6使用图像。 –

@BillyMoat - au contraire。我推荐CSS3Pie。不需要图像。 – Spudley

如果你需要回去那么远，我推荐使用Spiffy Corners：http://spiffycorners.com/ –

使用CSS3Pie。

这是一个JavaScript破解IE浏览器实现在旧版本的IE的CSS border-radius。

来源

2012-08-27 13:50:14 Spudley

谢谢，我会试一试 – Radicate

在已经运行的网站上使用它是否安全？或者我将不得不解决它会导致的一些问题？ – Radicate

是的，它非常安全。它只在IE中加载;其他浏览器完全忽略它。有关更多信息，请参见CSS3Pie网站上的示例和演示。 – Spudley

怀疑它会工作在IE6，但你可以使用以下命令：

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

假如把它放在你的CSS的DIV，它支持大多数浏览器，但同样，不知道IE6 ...它确实可以在IE9，Safari（5+），FireFox（1.0+），Chrome（5+）和Opera（10.5 +）上运行...

来源

2012-08-27 13:48:29 Dorian

这绝对不会支持在IE6 –

是的，IE6是相当过时的，我个人还没有使用它很长一段时间（在电脑时间：P） – Dorian

它不会在IE6上工作，这就是为什么我问了我上面写的代码。感谢朋友 – Radicate

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

Progressive Internet Explorer

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

这个工作最好在所有的ie浏览器

来源

2012-08-27 13:49:26 Dipak

是的，派很干净。如果在IE9和更早的版本中给他们提供方形角的时候，我真的无法脱身，我会和馅饼一起去。 –

IE9支持[border-radius]（http://msdn.microsoft.com/en-us/library/ie/jj127319（v = vs.85）.aspx）。 – Sampson

在现有网站上使用它是否安全？我不希望这一切都搞砸了或什么 – Radicate

是的，这将工作正常。

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

来源

2012-08-27 13:52:39 Guffa

我想这会工作，这是因为什么支持IE6一样好。

涵盖IE6的任何解决方案都将是一个非常糟糕的黑客攻击。我认为真的值得怀疑你是否真的需要它。我宁愿只使用CSS圆角，让芯片落在可能的地方。

来源

2012-08-27 13:55:19

CSS使用Divs作为角的圆角

回答

相关问题