CSS 圆角边框原理

都知道设置圆角边框是设置border-radius属性, 其中的原理你也知道么?

总结: border-radius就是圆的半径。

1. 圆角边框

四个圆分别贴在盒子的四角, 然后根据四个角取重叠部分。

原理图：

运行效果图：

2. 圆形

四个圆仍然分别贴在盒子的四角, 只不过半径已经达到高度一半，看起来像是一个圆，实际上是四个圆，然后根据四个角取重叠部分。

只有正方形盒子才能设置出圆形效果。

原理图：

运行效果图：