如何在非CSS3瀏覽器上製作圓角？

我知道我必須在這種情況下使用圖像，每個角落一個。如何在非CSS3瀏覽器上製作圓角？

例如，如果我需要8像素邊界半徑藍色實4PX邊框圍繞給定的元素，和我設計四象因此，

自左上角corner.png
頂右corner.png
左下-corner.png
右下角，corner.png

如何笑我是否實現了這一點，如果可能的話，不用表格？

來源

2011-06-15 Luc125

你說的是IE嗎？ – 2011-06-15 09:17:49

你只是不應該打擾它。 IE用戶可以生活在沒有圓角的地方。 – kapa 2011-06-15 09:50:08

好吧，是的，主要是IE瀏覽器，但也可能有一些不太知名的瀏覽器。 – Luc125 2011-06-15 10:39:20

我會不是使用css解決方法/其他人在這裏提出的建議，我會繼續使用圖像。是的，它設置起來更加繁瑣，但它是跨瀏覽器和強大的。我已經嘗試了一些這些css解決方法，並且發現它們充其量是不可預測的。它們可能在一些IE安裝中工作正常，但在其他安裝上卻不會（例如完全崩潰瀏覽器）。更糟糕的是，我們無法隔離爲什麼它在某些安裝上運行正常，而不是其他（並且這是針對相同的IE版本）。

我要麼：沒有彎曲的角落在IE瀏覽器，或使用圖像。您可以使用嵌套的div：

<div class="top-left"> 
    <div class="top-right"> 
     <div class="bottom-left"> 
      <div class="bottom-right"> 

      ... content ... 
      </div> 
     </div> 
    <div> 
</div>

，並在CSS設置了撥出background-image爲每個類，像這樣：

div.top-left { background: url('/top-left-corner.png') left top no-repeat; }

，並設置邊框樣式的div之一也是如此，如：

border: 4px solid #f00;

來源

2011-06-15 09:36:33

感謝您的體驗，沒有什麼比使用戶的瀏覽器崩潰更糟！我認爲使用嵌套div是一個聰明的想法 - 也許它在語義上不正確，但它看起來確實可靠，並保持css兼容。 – Luc125 2011-06-15 10:04:40

@ Luc1245 - 嵌套的div基本上是如何總是在css3之前完成的。 – 2011-06-15 10:26:41

我試過了，並且可以很好地處理非透明圖像。但就我而言，我可以在每個角落看到一個圓形邊框和一個方形邊框;我使用的像素除了那些構成拐角曲線的像素之外都是透明的，因此如果底層父元素的背景顏色發生變化，我不必製作不同的圖像組。請問，在這種情況下你有解決方案嗎？ – Luc125 2011-06-15 14:22:02

你試過http://css3pie.com/about/？你不必在這種情況下使用圖像...

來源

2011-06-15 09:15:55

從長遠來看，使用圖像會讓生活更加艱難，將它保留爲css意味着您可以更輕鬆地處理設計更改並保持可訪問性。+1 – 2011-06-15 09:20:29

謝謝！非常有趣的資源！我不知道這件事。它不需要圖像來製作圓角，這是一個很大的優勢！但它僅限於IE，並且要求用戶安全設置允許.htc文件。 – Luc125 2011-06-15 09:30:59

有這麼多的鏈接到谷歌，只需輸入圓角CSS，你應該找到一些幫助。較老的技術涉及使用類似一套b標籤之類的東西，您想要四捨五入來填充邊距併產生所需的半徑，但這會涉及到一些問題，並且有更好的反鋸齒解決方案。

來源

2011-06-15 09:18:08

像這樣http://www.roundedcornr.com/ – 2011-06-15 09:18:57

不錯的鏈接，可以生成盒子圖片並下載它們，而不必自己設計它們 – Luc125 2011-06-15 10:13:01

如果允許表和一些代碼，你可以不用圖像，並輕鬆切換顏色：

http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm

來源

2011-06-15 17:56:23

好工具！我會在允許使用表格的情況下使用它（以及一些跨度在角落中）。很好，我可以動態改變顏色。 – Luc125 2011-06-15 20:08:18

你的發電機有很多選擇，但我沒有找到像「邊框寬度」或「邊框顏色」的選項。我是否可以使用它來製作具有圓形邊框（如css border-radius）的圓角？ – Luc125 2011-06-16 10:09:57

如何在非CSS3瀏覽器上製作圓角？

回答

相關問題