border-radius“失效”主因是元素无渲染尺寸或未满足正圆条件：空div、inline元素、无宽高/背景/边框均导致无区域可圆；四角值按左上→右上→右下→左下顺时针；图片圆角现代浏览器直接支持，但正圆需宽高相等+明确尺寸+50%半径。
border-radius 能直接实现圆角矩形，但写错值、漏单位、或元素没撑开尺寸，圆角就“消失”了——不是失效，是根本没地方画。
为什么写了 border-radius 却还是直角
最常踩的坑是：元素视觉上“没区域”可圆。比如一个空的 <div>，没内容、没宽高、没背景、没边框，<code>border-radius: 10px 写了也白写。
- 元素是
display: inline（如默认的<span></span>），需加display: inline-block或display: inline-flex才能响应宽高与圆角 - 只设了
width: 100%但没设height，或父容器高度塌陷，导致实际渲染高度为 0 - 背景色透明、边框未启用、又没内容撑开，圆角边界不可见
- 用了百分比（如
50%）但宽高不等，结果是椭圆角，误判为“没效果”
border-radius 四角分别设置怎么写才不乱
顺序固定：顺时针，左上 → 右上 → 右下 → 左下。别记口诀，直接按这个方向数。
-
border-radius: 4px 8px 12px 16px：左上 4px，右上 8px，右下 12px，左下 16px -
border-radius: 6px 12px：左上和右下都是 6px，右上和左下都是 12px -
border-radius: 8px / 4px：横轴半径 8px，纵轴半径 4px（椭圆角，注意斜杠） - 单角控制更稳：
border-top-left-radius: 10px只动左上，不影响其余三边
图片加圆角必须用 overflow: hidden 吗
不一定。直接给 <img> 加 border-radius 在现代浏览器中会自动裁剪图像内容；但若圆角被截断、边缘发虚或旧版 Safari 渲染异常，就得靠容器兜底。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐优先写：
<img src="a.jpg" style="max-width:90%"> - 如果图片来自 CMS 或尺寸不可控，用容器更可靠：
<div style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden;"><img src="a.jpg" style="max-width:90%"></div> - 切忌给
<img>自身设overflow: hidden—— HTML 规范不支持，无效 - Android 4.3 以下不支持
border-radius裁剪图片，得用大像素值（如border-radius: 999px）模拟
正圆头像的三个硬性条件缺一不可
想让 border-radius: 50% 出正圆，不是“设了就行”，而是三者必须同时满足：
- 容器必须是正方形：
width和height值严格相等（不能靠aspect-ratio模拟，部分老浏览器不认） - 必须有明确的尺寸定义（不能只靠内容撑开，也不能只设
max-width） -
border-radius必须是50%或等于宽高一半的长度值（如40px对应80px宽高）
少一个，出来的就是椭圆、胶囊或压扁的怪形——这不是 bug，是浏览器按规范渲染的结果。
