CSS 药丸/体育场形状生成器
直观地设计 CSS 边框半径：四个独立的角滑块（以 px 或百分比表示）、用于即时圆圈和药丸的链接所有角的快捷方式，以及具有随机形状的有机斑点模式。
处理中...
0%
结果
此页面打开边框半径生成器，所有四个角都链接并推至非常大的半径：999px。在典型的按钮大小的矩形上，浏览器会将较大的半径剪切到框高度的一半，这就是产生完全圆形的药丸或体育场形状而不是带有轻微圆角的正方形的原因。
这就是为什么药丸按钮不需要根据每个按钮的高度调整精确的半径值 - 任何大于高度一半的数字都会给出相同的剪切结果，这也是为什么 999px（甚至 9999px）已成为 CSS 中“一路绕行”的非正式社区简写。
在您自己的布局中调整盒子的大小，并且相同的 999px 可以在任何高度上持续生成完整的药丸，因为浏览器总是自动剪辑到盒子的一半。一旦 CSS 看起来正确就复制它，或者取消角点的链接来构建一个不对称的胶囊。