* 对于一个正方形容器，只要**设定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(角向渐变)方案。