border-radius生效需配合background-color或border；img加圆角须自身设置并设display:block；box-shadow不随圆角变形，需overflow:hidden或filter:drop-shadow()；移动端小圆角发虚宜用偶数像素或50%。
border-radius 怎么写才生效
直接给元素加 border-radius 不一定出圆角，常见原因是没设边框或背景色——圆角是“裁剪”出来的视觉效果，没有可裁剪的内容（比如背景、边框、阴影），就看不出变化。
实操建议：
- 必须配合
background-color或border使用，否则纯透明区域加border-radius无视觉反馈 - 值可以是像素（
8px）、百分比（50%，适合做正圆）、或组合写法（12px 6px 4px 2px，顺时针：左上、右上、右下、左下） - 单个值如
border-radius: 8px会等效应用到四个角；border-radius: 50%在宽高相等时才能得到正圆
img 标签加圆角为啥切不掉溢出部分
<img> 默认是内联元素，且图片内容不受父容器 border-radius 影响——即使给 img 外层 div 加了圆角，图片仍会撑满并溢出。
解决办法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>自身加border-radius（推荐），同时确保它有display: block或包裹在块级容器中 - 用
overflow: hidden配合父容器圆角（但需额外加一层 div，不如直接作用于 img 简洁）
示例：
<img src="avatar.jpg" style="width: 100px; height: 100px; border-radius: 50%; display: block;">
圆角和 box-shadow 一起用时阴影不圆怎么办
box-shadow 默认按元素原始矩形形状投射阴影，不会自动跟随 border-radius 变形。结果就是：圆角头像+阴影=圆角图+方影子。
修复方式：
- 加
overflow: hidden到同一元素（对 img 或带圆角的容器都有效） - 或改用
filter: drop-shadow()，它会尊重圆角形状（但注意兼容性：IE 不支持） - 避免在
border-radius和box-shadow之间加transform，某些旧版 Safari 会破坏圆角裁剪逻辑
移动端圆角边缘发虚或锯齿怎么处理
iOS Safari 和部分安卓浏览器在渲染小半径圆角（尤其 1–4px）时容易出现抗锯齿异常，表现为边缘模糊或轻微错位。
缓解方法：
- 优先用偶数像素值（
2px、4px），避开 1.5px 这类非整数值 - 加
-webkit-backface-visibility: hidden或transform: translateZ(0)强制硬件加速（慎用，可能引发其他渲染问题） - 对关键头像类元素，用
border-radius: 50%+ 固定宽高，比小数值更稳定
真正难搞的是超小尺寸图标（如 16×16px）上的 1px 圆角——这时候不如放弃圆角，或换 SVG 图标自行描边控制。
