页面美化：border-radius圆角样式详解

详解CSS3圆角属性border-radius的全部赋值规则，掌握圆形、椭圆、异形圆角的制作方法，实战实现圆角按钮、圆形头像、圆角卡片等常用组件。

默认的直角盒子生硬刻板，不符合现代网页的审美风格，CSS3新增的border-radius圆角属性，无需图片、无需复杂代码，即可快速实现柔和的圆角效果，是页面美化的高频核心样式。

border-radius支持多种赋值方式，灵活适配不同场景需求。单值赋值为全局统一圆角，四个边角弧度一致，适合制作常规圆角卡片、按钮；双值赋值遵循「左上右下、右上左下」的对称规则，可制作对称异形弧度；四值赋值可单独控制左上、右上、右下、左下四个边角，自由定制不规则圆角样式。

最常用的进阶技巧是圆形制作，当盒子宽高数值完全相等时，设置 border-radius: 50%，即可生成标准正圆，广泛用于网站头像、圆形图标、按钮组件；若盒子宽高不一致，50%赋值则会生成椭圆图形。核心示例代码如下：

/* 圆形盒子 */
.circle{
    width: 200px;
    height: 200px;
    background: #409eff;
    border-radius: 50%;
}
/* 通用圆角卡片 */
.card{
    width: 300px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
}

除此之外，还可以利用大数值圆角制作胶囊按钮，长方形盒子设置高度一半的圆角值，即可实现两端圆润的胶囊样式。在日常开发中，合理搭配圆角、阴影、内边距，能够快速提升页面的精致感和层次感，是低成本美化页面的必备技巧。