直接使用border-radius属性即可实现圆角，现代浏览器均原生支持；需确保元素有宽高、背景或边框，img等元素还需配合overflow:hidden以防内容溢出。
直接用 border-radius 就行，不需要“一行HTML”或“一行CSS”的玄学写法——它本来就是单个声明，写在哪都生效。
为什么有人觉得“一行实现圆角”是个问题？
其实是因为混淆了「写法简洁」和「技术限制」。早期（IE8及更早）不支持 border-radius，有人用背景图、SVG甚至JS模拟圆角，导致遗留文档里充斥“兼容方案”。现在所有主流浏览器（Chrome/Firefox/Safari/Edge）从2012年起就原生支持，border-radius 就是最直接、最可靠的方式。
常见错误现象：
• 写了 border-radius: 8px 没效果 → 元素没边框、背景或内容，视觉上“看不见”圆角
• 在 img 上加了圆角但图片溢出 → 忘记加 overflow: hidden
• 圆角在移动端显示异常 → 没设 viewport 或用了 rem 导致缩放错乱
border-radius 的实际写法和参数差异
border-radius 支持多种值格式，不同写法影响四个角的形状：
-
border-radius: 4px→ 四个角都是 4px 圆角（最常用） -
border-radius: 4px 8px→ 左上/右下为 4px，右上/左下为 8px（顺时针：top-left, top-right, bottom-right, bottom-left） -
border-radius: 4px 8px 12px 16px→ 分别控制四角 -
border-radius: 50%→ 强制变成圆形（需宽高等比，否则是椭圆） -
border-radius: 4px / 2px→ 斜杠前是水平半径，后是垂直半径（椭圆角，少用）
注意：border-radius 本身不触发重排，但若用于 img 或含子元素的容器，记得配合 overflow: hidden 才能真正裁剪内容。
哪些场景下不能只靠 border-radius？
不是所有“圆角需求”都能靠一个属性解决：
- 需要内边距区域也带圆角（比如卡片+阴影）→ 得给父容器设
border-radius，同时确保box-shadow不溢出（可用overflow: hidden或调整shadow的 spread 值） - 圆角按钮带渐变背景 →
border-radius生效，但旧版 Safari 对background-image + border-radius裁剪不严格，建议加isolation: isolate或包裹一层伪元素 - 动态改变圆角（如 hover 变形）→ 确保用
transition: border-radius 0.2s，不要和transform混用，否则可能触发非合成层导致卡顿 - 需要像素级精确控制（比如 1.5px 圆角）→ 大部分浏览器会四舍五入到整像素，
border-radius: 1.5px实际渲染可能是 1px 或 2px
容易被忽略的细节
很多人写了 border-radius 就以为完事，但以下三点常被跳过：
- 没有测试
focus状态下的 outline —— 默认 outline 是直角，会破坏圆角视觉，建议加outline: none或用outline-offset: -2px微调 - 在 flex/grid 容器中，子项的
border-radius可能被父容器的overflow截断，要检查层级关系 - 打印样式表（
@media print）里默认会禁用border-radius，如果需要保留，得显式重写
真正的难点从来不在“怎么写”，而在“什么时候该写、写在哪、要不要配其他声明”。border-radius 很简单，但它的表现高度依赖上下文——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
