自适应椭圆
div {
width: 200px;
height: 100px;
background: darkgreen;
border-radius: 50%;
}
效果图：
核心代码只有一句 border-radius: 50%，但它背后的原理还是挺有意思的。
我们知道，为正方形设置圆角，圆角半径为正方形边长的一半，可以画出一个圆形。
div {
width: 100px;
height: 100px;
background: darkgreen;
border-radius: 50px;
}
效果图：
如果圆角半径超过了边长的一半，会发生什么呢？
当任意两个相邻圆角的半径之和超过 border box 的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠为止。
举个例子，以左上角和右上角的圆角为例，假如元素为一个正方形，边长为 120px，左上角圆角半径为 50px，右上角圆角半径为 100px。50+100=150，超过了正方形的尺寸。 50 比 100 等于 1 比 2，左上角的圆角半径会被减少到 120px 的三分之一，即 40px。右上角的圆角半径会被减少到 120px 的三分之二，即 80px。
效果图：
如果左上角圆角半径是 100px，右上角圆角半径也是 100px，100+100=200，也超过了正方形的尺寸，他们会按照1:1的比例，分别缩短到60px
效果图：
border-radius 可以分别指定水平和垂直方向的半径，只要用一个斜杠 / 分隔这两个值就可以了。使用这个特性可以画出一个椭圆圆角。
div {
width: 100px;
height: 100px;
background: darkgreen;
border-radius: 50px/25px;
}
效果图：
50x25
当然，斜杠前后的值也可以是百分比，分别对应元素的宽和高，比如 50% / 20%
如果斜杠前后值相同，比如 50% / 50% ，可以简写为 50%，这就是开头说的border-radius: 50%，四个圆角会根据元素的宽和高，将水平半径和垂直半径，设置为宽和高的一半，这样我们就得到了一个自适应的椭圆了。
半椭圆
CSS 中存在很多简写属性，展开之后的顺序通 常是从上边或左上角开始，顺时针。
被简化的不仅是属性的名字，还有属性值，以 margin 为例，如果上下外边距一样，都为 10px，左右外边距也一样，都为 20px，可以简写为 marign: 10px 20px
如果上下边距不一样，上为 10px，下为 30px，左右外边距一样，都为 20px，可以写为 maring: 10px 20px 30px ，这里虽然没有显式地写明左外边距，但按规定，默认和右外边距相等，相当于 maring: 10px 20px 30px 20px。
border-radius也是个简写的属性，属性展开为：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
即从左上角开始，顺时针顺序。
div {
width: 100px;
height: 100px;
background: darkgreen;
border-radius: 10px 20px 30px 40px;
}
效果图：
border-radius: 10px 20px 30px 40px 等价于
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px。
要想画一个半椭圆，可以考虑将元素左上角和左下角的圆角的水平半径都设置为元素的宽，垂直半径都设置为元素高度的一半。
div {
width: 200;
height: 100;
background: darkgreen;
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
}
效果图：
如果用展开的属性，单独为某个圆角设置水平半径和垂直半径，比如border-top-left-radius，就不能用斜杠分隔水平半径和垂直半径，要用空格。
上面的圆角设置，可以简写为border-radius: 100% 0 0 100% / 50% 0 0 50%，可以再简写为border-radius: 100% 0 0 100% / 50%
四分之一椭圆
要想画一个四分之一椭圆，可以考虑将元素左上角的水平半径设置为元素的宽，垂直半径都设置为元素的高。
div {
width: 200;
height: 100;
background: darkgreen;
border-top-left-radius: 100% 100%;
}
效果图：