border-radius 移動之傷

border-radius我相信對於老一輩的前端們有着特殊的感情，在經歷了沒有圓角的蠻荒時代，到現在 CSS3 遍地開花，咱們仍是很幸福的。然而即便到了三星大臉流行時代，border-radius在移動端的表現依舊差強人意，主要有兩點問題：

Android 2.3 自帶瀏覽器不支持 %

一般咱們實現一個正圓只須要border-radius: 50%便可，大體代碼以下：

.foo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid blue;
}

然而 Android 2.3 是不支持百分比的，要兼容咱們只能使用一個較大值，好比border-radius: 999px;

Android 及 Safari 低版本 img 圓角問題

當 img 元素有border 時設置border-radius 會致使圓角變形，須要在img 外面嵌套一個元素並設置border 和border-radius。Demo

Android 4.2.x 背景色溢出及不支持 border-radius 縮寫

測試發現，在 Android 4.2.x 系統自帶瀏覽器中，同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分，須要是使用background-clip: padding-box;來修復，可是若是border-color爲半透明時，背景直角部分依然會露出來

Android 4.2.x 不支持border-radius縮寫

這個 BUG 在小米上測試並未發現，國外有人反映三星 Galaxy S4 中自帶瀏覽器不支持。解決方案就是使用border-radius的四個擴寫屬性，縮寫屬性放到最後。以上兩個問題影響到 Android 4.2.x 內核的系統以及在其基礎上定製的系統的自帶瀏覽器，好比：紅米，小米3，阿里雲OS 等，安卓版 Chrome 不受影響。
完整代碼應該是這樣的：

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

其餘問題

• IE9 中fieldset元素不支持border-radius。
• IE9 中帶有背景漸變(gradient)的時候背景溢出。

感謝幽默的一絲分享：

原文連接：https://github.com/yisibl/blog/issues/2