返回首页
border-radius 四角独立调节 · 圆形胶囊异形
圆角预览
四角联动 椭圆模式(垂直半径独立)
小圆角 4px
卡片 12px
大圆角 20px
胶囊/圆形
异形Blob

border-radius 写法

border-radius: 左上 右上 右下 左下 可分别设置四角;椭圆角写法为 水平半径 / 垂直半径(如 border-radius: 30px 10px / 20px 40px),产生不对称的有机曲线,即流行的 Blob 异形效果。

快捷技巧:正方形元素设 border-radius:50% 为正圆;按钮设 999px(或高度一半)为全圆角胶囊;iOS 风格卡片多用 12-16px;现代大卡片流行 20-28px。

常见问题

为什么圆角加了但背景图没跟着圆?
需要配合 overflow:hidden,或给背景图元素本身也设置 border-radius;子元素内容溢出时圆角会被"撑破"。
border-radius:50% 和 999px 有区别吗?
50% 是以元素宽高比例为基准,正方形变正圆、矩形变椭圆;999px 是超大固定值,矩形元素会变成两端半圆的胶囊形。
圆角阴影有锯齿?
极个别旧浏览器渲染问题,可加 transform:translateZ(0) 触发GPU合成消除。