携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情。
参考：《CSS 新世界》
语法
border-radius 属性实际是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 这四个属性的缩写，这四个属性分别表示不同角的圆角值。
方位值
border-radius 属性支持 1 到 4 个值，分别表示不同的角。
有 1 个值
作用于全部四个角
有 2 个值
- 第一个值作用于左上角和右下角
- 第二个值作用域右上角和左下角
有 3 个值
- 第一个值作用于左上角
- 第二个值作用于右上角和左下角
- 第三个值作用于右下角
有 4 个值
顺时针方向依次作用于左上角、右上角、右下角、左下角
水平半径和垂直半径
border-top-left-radius: 1px; 中的 1px 也是缩写，其等同于 border-top-left-radius: 1px 1px;，前一个表示水平半径，后一个表示垂直半径。
border-top-left-radius: 50px 20px; 表示左上角的圆角是由水平半径为 50px 和 垂直半径为 20px 的椭圆产生的。
如果是 border-radius 属性，可以通过斜杠区分水平半径和垂直半径，例如 border-radius: 50px/20px;
圆角效果是如何产生的
圆角效果本质上是 以半径值绘制的圆或以半轴值绘制的椭圆 和指定元素的边界重叠绘制出的新曲线。
渲染设定
考虑一种场景，圆的半径超过元素的宽或者高，会怎么样？
如上所示，元素的宽高分别为 300px 和 200px，设置左上角的圆角为 border-top-left-radius: 60px 300px;，如果按照椭圆的和元素的重叠部分绘制曲线则会影响到左下角的圆角，所以这一问题应该做额外的渲染设定。
根据《CSS 新世界》里的说法，会去计算 f 值，f = min(元素宽/水平直径，元素高/垂直直径)，如果 f 值小于 1，圆角半径都乘以 f 值进行渲染，那么在上图的场景中，f 值约为 0.33，最终的圆角半径应该为 border-top-left-radius: 18px 90px;，但实际并非如此。
在 Chrome 浏览器中，渲染出来的圆角半径实际是 border-top-left-radius: 40px 200px;，所以这里的 f 值计算应该是 f = min(元素宽/水平半径，元素高/垂直半径)，也就是说上图的场景中，f 值约为 0.66。
那么是浏览器兼容性的原因导致的吗？这里先附上 CSS 规范的说明网站，等后续有时间再去研究。
渲染 border 边框的细节
需要注意的是，上面提到的元素宽高，可能不仅仅是 width 和 height 的值。如果元素设置了 border，我们需要去了解它的 box-sizing。
box-sizing 的默认值一般是 content-box，即标准盒子模型，边框（border）的计算值 + 内容的宽高才是用来计算 f 值的宽高。
我们可以设置 border-box 来指定元素的渲染宽高不包括边框的值。
