CSS瀏覽器應用半徑邊框的安全方法？

如何在所有瀏覽器（例如IE，WebKit，Mozilla）上執行此操作？

如果瀏覽器不支持border-radius屬性，則默認爲無半徑（方形角）。

2010-05-03 sarah

-webkit-border-top-left-radius: 3px; 
-webkit-border-top-right-radius: 3px; 
-moz-border-radius-topleft: 3px; 
-moz-border-radius-topright: 3px; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px;

來源

2010-05-03 17:12:17 artlung

MSIE呢？ – sarah 2010-05-03 17:13:04

查看我發佈給msie的鏈接。 – meo 2010-05-03 17:16:34

meo的鏈接很好。跳轉到此頁面：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/。 MSIE沒有簡單的CSS解決方案。 :-( – artlung 2010-05-03 18:05:23

如果IE曾經支持過任何標準，那就請吃我的帽子。

這是可以期待的最好：

-webkit-border-top-left-radius: 3px; 
-webkit-border-top-right-radius: 3px; 
-moz-border-radius-topleft: 3px; 
-moz-border-radius-topright: 3px; 
border-top-left-radius: 3px; 
border-top-right-radius: 3px;

編輯：我不好，錯過了「左上角和右上角只是」部分，糾正codez

來源

2010-05-03 17:10:12

IE是第一個在他的列表中，但唯一沒有被你的例子所覆蓋的：P檢查我發佈的鏈接 – meo 2010-05-03 17:11:19

是真的，但OP也說「如果瀏覽器不支持邊界半徑屬性，只是默認爲無半徑「，這將發生什麼。所以答案是正確的。 – 2010-05-03 17:12:39

詳細說明@sarah，這正是你想要的。 IE不支持圓角，所以它只會顯示方形。 WebKit（Safari）和Moz（Firefox等）通過瀏覽器特定的CSS（帶前綴的規則）支持圓角。簡單的'邊界半徑'用於未來打樣。 – 2010-05-03 17:14:27

檢查這個話題。它應該涵蓋所有的需求在圓角： Emulating CSS3 border-radius and box-shadow in IE7/8

來源

2010-05-03 17:10:22 meo

border-top-left-radius:3px; 
border-top-right-radius:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-top-left-radius:3px; 
-moz-border-radius-topright:3px; 
-moz-border-radius-topleft:3px;

這將在Mozilla和Webkit的瀏覽器，並支持任何CSS3的邊界半徑財產的工作。 IE =沒有去。另外，你應該注意到FF2會支持這一點，但圓潤的邊緣不是很漂亮。

來源

2010-05-03 17:12:32 Reece

CSS瀏覽器應用半徑邊框的安全方法？

回答

相關問題