CSS 圆形生成器 — 50% 边框半径
直观地设计 CSS 边框半径：四个独立的角滑块（以 px 或百分比表示）、用于即时圆圈和药丸的链接所有角的快捷方式，以及具有随机形状的有机斑点模式。
处理中...
0%
结果
此页面打开边框半径生成器，所有四个角都链接在一起并设置为 50%，该值仅使用 CSS 将盒子变成圆形。老实说：在方形盒子上，这会形成一个完美的圆形，但在矩形盒子上，同样的 50% 会产生一个类似体育场的椭圆，因为每个角只会将自己的四分之一圆化。
这种区别很重要，因为 50% 边框半径是在 CSS 中构建圆形头像、图标徽章和状态点的最常见方法 - 比用蒙版剪切圆形或在 SVG 中绘制圆形要简单得多，而且它在任何尺寸下都保持清晰，因为它是相对百分比，而不是固定的像素半径。
在您自己的 CSS 中将框切换为固定的正方形大小以锁定完美的圆形，或者故意将其保留为矩形以获得类似药丸的形状 - 无论哪种方式，角都保持链接在一起，因此在复制生成的 CSS 时，单个滑块可以使所有四个角保持同步。