CSS border-radius 的四个值分别代表什么？

border-radius 可以接受1~4个值。一个值时四个角相同；两个值时第一个值为左上+右下，第二个为右上+左下（对角）；三个值时分别为左上、右上+左下、右下；四个值按顺时针顺序：左上、右上、右下、左下。

px 和 % 单位有什么区别？

px 是固定像素值，不受元素尺寸影响，适合精确控制。% 是百分比值，相对于元素自身的宽高（注意：水平方向相对于宽度，垂直方向相对于高度），可以实现响应式的圆角效果。圆形通常使用 50%。

要创建圆形，需要两个条件：1) 元素宽高相等（正方形），2) border-radius 设置为 50% 或宽高一半的像素值。使用百分比 50% 是最通用的方式。如果元素不是正方形，50% 会生成椭圆形。

border-radius 对性能的影响非常小。现代浏览器对圆角渲染做了大量优化，即使大量使用也不会造成明显的性能问题。唯一需要注意的是，当圆角与 box-shadow、filter 等同时使用时，可能会触发合成层，略微增加 GPU 内存占用。

可视化配置 CSS border-radius 属性，支持四角独立控制，实时预览并复制代码

快速预设：

TL: 12px TR: 12px BL: 12px BR: 12px

圆角参数

左上角 (top-left)

右上角 (top-right)

左下角 (bottom-left)

右下角 (bottom-right)

预览背景色#6366f1

border-radius: 12px;