WebKit的邊界半徑，有時生效

這個問題是關於CSS3邊框半徑屬性（http://www.css3.info/border-radius-apple-vs-mozilla/）WebKit的邊界半徑，有時生效

這個問題的一個例子是在這裏：

http://jamtodaycdn.appspot.com/bin/rounded.html

在這個URL，我已經四捨五入在FF3中看起來是四捨五入的，但在Safari和Chrome上，圓角不在那裏。

樣式如下：

-moz-border-radius-bottomleft:2px; 
-moz-border-radius-bottomright:92px; 
-moz-border-radius-topleft:92px; 
-moz-border-radius-topright:2px; 
-webkit-border-bottom-left-radius: 2px; 
-webkit-border-bottom-right-radius: 92px; 
-webkit-border-top-left-radius: 92px; 
-webkit-border-top-right-radius: 2px;

我相當肯定，這CSS格式正確，所以我無能，是什麼問題。

來源

2009-07-05 jamtoday

該問題似乎是在92px的輻射。它看起來像20像素高的div可以處理的最大半徑是18px。在這種情況下，92像素半徑意味着什麼不一定很明顯。但是，您可以同時指定X和使用這樣的Y半徑：

-webkit-border-bottom-right-radius: 92px 18px;

（側面說明，你不應該使用多個HTML元素相同的ID，您應該使用類代替，並且調整你的CSS選擇器所以它說。.round而不是#round。）

來源

2009-07-05 19:08:29 Jacob

關於ID的好處。這是我在幾秒鐘內闖入的東西，但這總是很好的建議。 – jamtoday 2009-07-05 23:05:31

您是否需要應用邊框或邊框寬度屬性以及各種邊框半徑屬性？

此外，我已經注意到Safari將半徑放大到特定半徑值以上 - 嘗試減小像素值&看看會發生什麼。

來源

2009-07-05 09:52:48

關於第一個，不，你不需要指定「border」或「border-width」屬性來使用「border-radius」屬性。 – 2009-07-05 10:33:07

對於任何人提到這個圓角的幫助，我同意雅各布關於Webkit的答案，但問題也提到Chrome不工作。 Chrome使用標準的CSS3圓角，與Webkit完全相同，但規則中沒有前面的「-webkit-」。這些如下：

border-bottom-right-radius:2px;

要考慮的Firefox，WebKit和Chrome瀏覽器，你需要做這樣的事情：

-moz-border-radius-topright:3px; 
-moz-border-radius-bottomright:3px; 
-webkit-border-top-right-radius:3px; 
-webkit-border-bottom-right-radius:3px; 
border-top-right-radius:3px; 
border-bottom-right-radius:3px;

第三套規則是CSS3規則和支持由Chrome。這是一個很好的方式來使用類似CSS3Pie還得到IE圓角：http://css3pie.com/

來源

2011-04-24 18:34:54 slave2zeros

簡單類型只需使用：

border-radius:92px 92px 2px 2px;

其中：

border-radius:top right bottom left;

來源

2013-08-27 08:20:49 IRvanFauziE

WebKit的邊界半徑，有時生效

回答

相關問題