<>：自適應的橢圓

自適應的橢圓

利用border-radius生成橢圓。CSS參考手冊

橢圓

對一個寬度和高度不一樣的容器進行以下設置，就獲得一個橢圓
border-radius: 50%

半橢圓

border-radius是一個簡寫屬性。分別對應着：

• border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius
  而實用斜線能夠單獨指定水平半徑和垂直半徑。綜合利用這些，就能夠獲得半橢圓

border-radius: 50% / 100% 100% 0 0; //縱軸對稱

border-radius: 100% 0 0 100% / 50%; //橫軸對稱

四分之一橢圓

繼續沿着半橢圓的思路。咱們來生成一個四分之一橢圓
border-radius: 100% 0 0 0; //左上角，也能夠指定其餘角