* 對于一個正方形容器，只要**設定border-radius 的值大于邊長的一半就能得到一個圓形**，原理是CSS 規范中規定：當任意兩個相鄰圓角的半徑之和超過border box 的尺寸時，用戶代理必須按比例減小各個邊框半徑所使用的值，直到它們不會相互重疊 為止。 * [**border-radius**](https://www.w3schools.com/cssref/css3_pr_border-radius.asp)：border-radius 有一個鮮為人知的真相：它**可以單獨指定水平和垂直半徑**，只要用一個斜杠（/）分隔這兩個值即可。甚至可以**為所有四個角提供完全不同的水平和垂直半徑**，方法是在斜杠前指定1~4 個值，在斜杠后指定另外1~4 個值。請注意這兩組值是單獨展開為四個值的。四個值就會被分別從左上角開始以順時針順序應用到元素的各個拐角。 * [**transform**](https://www.w3schools.com/cssref/css3_pr_transform.asp)：transform可以進行各種各樣的變形。產生例如平行四邊形、菱形、梯形等形狀。 * 畫**簡單餅圖**的方案：基于transform的方案、SVG方案、conic-gradient(角向漸變)方案。