border-radius是我們實現圓角的方法之一(ie8以下不支援，相容的話建議上層定位一張圓角)，不過圓角這個屬性也有自己的縮寫計算方式，很多人看到「border-radius: 20px 20px 20px / 30px」 這樣的**就不知道圓角效果是什麼樣的，今天說一下我自己的理解：自動補全法。
border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;
/*(x1 y1)表示第乙個圓角控制點——左上角*/
/*(x2 y2)表示第乙個圓角控制點——右上角*/
/*(x3 y3)表示第乙個圓角控制點——右下角*/
/*(x4 y4)表示第乙個圓角控制點——左下角*/
真麼自動補全呢？就比如開頭我們提到的「border-radius: 20px 20px 20px / 30px」
假如：僅有 x1 x2 x3 x4，沒有y1 y2 y3 y4。那麼x1 = y1，x2 = y2,x3 = y3，x4 = y4,也就是說控制點值相等，重複的省略了，補全之後：border-radius: x1 x2 x3 x4 / x1 x2 x3 x4
假如：僅有x1和x2兩個控制值，x3,x4為都為空。那麼：x3,x4分別可以用x1,x2替換，補全之後：border-radius: x1 x2 x1 x2
假如：僅有 x1 x2 x3，沒有x4。那麼：x4可以用x2替換，相等省略了，補全之後：border-radius: x1 x2 x3 x2
疑問：為什麼不用x1或者x3補全啊?
答：圓角標準是兩個值 border-radius: x y;所以控制都是對應位置進行補充
疑問：我們常用的僅有乙個值：border-radius: 10px;，怎麼補全？
答：四個值都相等：border-radius: 10px 10px 10px 10px
border radius值的解析
border radius none length length 其中每乙個值可以為 數值或百分比的形式。length length 第乙個lenght表示水平方向的半徑，而第二個表示豎直方向的半徑。如果是乙個值，那麼 top left top right bottom right bottom l...
border radius 圓角半徑
相關屬性 border top right radius border bottom right radius border bottom left radius border top left radius 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radi...
border radius屬性詳解
border radius屬性的應用，大家最熟悉的應該就是頭像了，但其實，border radius屬性還是很強大的，你能相信，下面兩個圖形都是用border radius畫出來的麼？下面是我結合網上大佬們的部落格資料以及自己的實踐結果得出來的一些結論，有什麼不對的望各位大神們批評指出，謝謝 我們經...