border-radius通过设置圆角提升界面视觉效果，需根据元素尺寸选择合适数值：小型元素用4-8px，中等容器6-12px，大区域可用16px或百分比；百分比适用于自适应场景如圆形头像（50%）或胶囊按钮；注意避免内容裁剪，配合overflow:hidden和足够内边距，确保可读性与布局协调。
设置元素边框圆角时，border-radius 是最常用的CSS属性。它能让矩形边框变得圆润，提升视觉体验。关键在于如何合理设置数值，使圆角与内容协调，不破坏布局或可读性。
理解 border-radius 的基本用法
border-radius 可以接受长度值（如 px、em）或百分比。数值越大，圆角越明显。
- 单个值：四个角统一设置，例如 border-radius: 10px;
- 两个值：分别设置水平和垂直半径，用于椭圆角，例如 border-radius: 10px / 5px;
- 四个角分别设置：支持简写语法，如 border-radius: 5px 10px 5px 0;
根据元素尺寸适配圆角大小
圆角的视觉效果与元素本身大小密切相关。小按钮使用大圆角会显得突兀，而大卡片用小圆角则不够柔和。
- 小型元素（如按钮、标签）：建议使用 4px 到 8px，或直接设为 border-radius: 4px;
- 中等容器（如卡片、模态框）：6px 到 12px 比较合适，看起来自然
- 大尺寸区域（如全宽横幅）：可用 16px 或更高，甚至用百分比实现弧形边缘
使用百分比实现自适应圆角
当元素宽度不固定时，百分比值能让圆角随容器变化。特别适合圆形头像或响应式设计。
立即学习“前端免费学习笔记（深入）”；
- 圆形图像：设置 border-radius: 50%; 可将方形图变圆形
- 胶囊形状按钮：宽度不定时，用 border-radius: 50%; 实现两端半圆效果
- 百分比基于对应方向的尺寸，横向半径参考宽度，纵向参考高度
避免圆角影响内容显示
过大的圆角可能导致内容被裁剪，尤其是带背景图或内边距不足的元素。
基本上就这些。合理设置 border-radius 能让界面更现代、友好。关键是根据元素用途和尺寸选择合适的值，同时关注内容与边框的协调性。不复杂但容易忽略细节。
