什么是 CSS 圆角 (border-radius)？
CSS
border-radius
属性用于为元素的边框外边界绘制圆角。虽然它看起来只是一个简单的视觉修饰，但在现代网页设计中，圆角能显著降低界面的“锐利感”，让
UI 看起来更友好、更具现代感。它解决了“界面过于僵硬”和“缺乏亲和力”的具体问题。
常规模式 vs. 高级 8 点模式
- 常规模式 (Simple Mode)： 对应 4 个角。每个角由一个半径定义，创造出完美的 1/4 圆。这是最常见的圆角应用。
-
高级 8 点模式 (Full Mode)：
这是
border-radius属性的高级用法，允许您为每个角分别设置水平半径和垂直半径（语法如30% 70% 70% 30% / 30% 30% 70% 70%）。通过这种方式，您可以创造出极具艺术感的“有机形状”或“水滴形状（Blob）”，这在当前的创意网页设计中非常流行。
如何选择合适的圆角大小？
圆角的大小直接影响用户对界面的感知：
- 2px - 4px： 微小的圆角，能保留矩形的严谨感，同时去除尖锐感。适合企业级后台或严肃的文字内容。
- 8px - 12px： 现代主流风格。适合卡片、按钮和对话框，能提供良好的视觉舒适度。
- 50%： 将正方形变为圆形。常用于头像或图标。
- 有机形状 (Blob)： 使用高级模式生成。适合作为背景装饰或创意插画的载体。
常见问题 (FAQ)
Q: 为什么我设置了 50% 但不是圆？
A: 只有在元素的长宽完全相等（正方形）时，50%
的圆角才会生成完美的圆。如果是长方形，则会生成椭圆。
Q: 圆角会对图片裁剪吗？
A: 是的，只要为容器设置了
overflow: hidden;
，内部的图片或内容就会按照圆角形状进行裁剪。
Q: 8 点模式的兼容性如何？
A: 该语法自 CSS3 时代起就被所有主流浏览器（Chrome, Firefox, Safari,
Edge）完全支持，您可以放心在生产环境中使用。