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作爲角的圓角

回答

相關問題