CSS跨瀏覽器彎曲邊框

定義跨瀏覽器CSS/CSS3兼容/有效彎曲邊框的正確/最佳方式是什麼？CSS跨瀏覽器彎曲邊框

在跨瀏覽器兼容的情況下，是否存在非JavaScript方式這樣做？如果沒有，是否有任何適當的解決方法？

2011-02-17 Samuel Liew

哪些瀏覽器？ – SLaks 2011-02-17 23:55:23

您是否嘗試過：

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px

在一起嗎？這應該涵蓋最新版本（至少）中的主要3個瀏覽器。沒有JavaScript或使用圖片，你不會得到完整的跨瀏覽器覆蓋。

來源

2011-02-17 23:59:15 biscuitstack

做到這一點的最好方法是使用border-radius。

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px

這隻適用於Safari，Firefox和Chrome。這不適用於IE 7 + 8（或更少）

如果您想獲得最大的兼容性，但靈活性最低，圖像是最佳選擇。

如果您希望靈活性和瀏覽器兼容性，請使用javascript。我發現的最好的一個將CSS3聲明轉換爲IE 7 + 8中的圓角。

檢查一個在這裏：http://www.curvycorners.net/

來源

2011-02-18 00:00:05

見CSS Border Radius Generator（簡單的圓角）或CSS3 Please（更多效果）的唯一CSS的解決方案。如果你想要的東西適用於Firefox 3.0以上，Safari 3.0以上，Chrome 5.0以上，Opera 9.5以及Internet Explorer 6.0以及無圖片然後嘗試Raphaël。這是Raphaël的作者nice talk by Dmitry Baranovskiy，解釋了爲什麼它很酷。

來源

2011-02-18 00:03:43 rsp

你應該使用這樣的：

-moz-border-radius: 20px; 
border-radius: 20px

的WebKit現已支持普通border-radius一會兒。例如，

http://css3generator.com/已丟棄-webkit前綴。

要，我建議使用CSS3 PIE，這是下載一個小文件，並將其加入到你的CSS一樣簡單使Internet Explorer，這工作：

behavior: url(PIE.htc)

當然，這隻會工作時的Javascript在IE中打開（通常是這種情況）。

來源

2011-02-18 00:05:42 thirtydot

CSS跨瀏覽器彎曲邊框

回答

相關問題