CSS 跨瀏覽器彎曲邊框

Question

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

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

Answer 1

你有沒有嘗試過：

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

一起？ 這應該涵蓋最新版本中的主要 3 個瀏覽器（至少）。 沒有 javascript 或使用圖像，您將無法獲得完整的跨瀏覽器覆蓋。

Answer 2

請參閱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 的作者Dmitry Baranovskiy的精彩演講，解釋了為什么它很酷。

Answer 3

最好的方法是使用邊界半徑。

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

這僅在 Safari、Firefox 和 Chrome 中兼容。 這不適用於 IE 7+8（及更少）

如果您想要最大的兼容性但最小的靈活性，圖像是要走的路。

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

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

Answer 4

你應該使用這個：

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

WebKit 支持純border-radius已經有一段時間了。

例如， http: -webkit刪除了-webkit前綴。

為了在 Internet Explorer 中完成這項工作，我建議使用CSS3 PIE ，這就像下載一個小文件並將其添加到您的 CSS 中一樣簡單：

behavior: url(PIE.htc)

當然，這只有在 IE 中打開 Javascript 時才有效（通常是這種情況）。