CSS 边框圆角关系测试

情况1: outer r = inner r

外部圆角 = 内部圆角
外部: 20px
内部: 20px

情况2: outer r = inner r + padding

外部圆角 = 内部圆角 + 内边距
外部: 40px
内部: 20px

观察要点

情况1:当外部圆角等于内部圆角时,内部边缘会出现"尖角"效果,因为内边距区域没有足够的圆角补偿。

情况2:当外部圆角等于内部圆角加上内边距时,内外边缘的曲线看起来更加协调和自然。

结论:为了获得视觉上连续的圆角效果,外部圆角应该等于内部圆角加上内边距。