玩壞css之border-radius屬性

最近看了一本書，《css揭秘》[希] LEA VEROUS 著

都是關於css3之類的標簽屬性之類的；今天演示一下：border-radius這個屬性；【因為總覺得作者的數學不是很好，不過還是很感謝她的】

首先我們要接受 【border-radius: 50% / 50%】,第一個百分之50%，代表水平方向的距離，第二個代

豎直方向的距離；

現在我們border-radius:50% / 50%展開：border-radius:50% 50% 50% 50% /50% 50% 50% 50% 顏

色相對應的都是指同一個角

首先我們要理解橢圓或圓是怎麼畫的，橢圓的話，我們首先要知道橢圓的長半徑和短半徑確定中心點，同理

畫圓也需要半徑確定中心點；所以重點便是【中心點的選擇】

我們都知道 border-radius: 50%時,那麼就會變成橢圓

然而真真的原理就在這個時刻哦：

首先我們先理解：這個橢圓是由四個1/4的橢圓組成，正好對應四個角；讓每個角都變成1/4的橢圓就是我們

所需要做的；

首先左上角要形成四分之一橢圓，那麼圖上的兩個紅心的交點便是中心點；這個中心點的位置：就是其水平

距離50%，豎直距離是50%；同樣：其他三個角也是這樣；

懂了沒？

看看我做的形狀：

再來演示第二個border-radius：

首先我們可以確定：

第一個角的中心點：水平方向50%，豎直是100%;

第二個角的中心點：水平方向0，豎直方向0；

第三個角的中心點：水平方向50%，豎直是100%；

第四個角的中心點：水平方向0，豎直方向0；

謝謝大家，獲取更多精華技術IT資訊，請持續關注雲棲社區“達摩老祖”and"碼上有錢"

最後更新：2017-07-23 20:40:15