border-radius: 50%仅在宽高等值时生成正圆，否则为椭圆；圆角矩形只需合法值如8px即可，但需元素有尺寸且父容器配overflow: hidden裁剪子元素。
能直接用 border-radius 实现，但“圆角矩形”和“完美圆形”触发条件完全不同——前者只要值合法就出效果，后者必须宽高相等且用 50%（或精确半值），否则全是椭圆。
border-radius 写多少才出圆角矩形
写一个数值（如 border-radius: 8px）就能出标准圆角矩形，但前提是元素得有可渲染的块状区域：
- 必须设
width和height，或靠内容+padding撑开尺寸；纯文字的默认display: inline，不加display: inline-block或display: block就没反应 - 没背景色、没边框、内容为空，圆角“存在但不可见”——不是失效，是没东西可裁剪
- 值越大越圆，
border-radius: 999px在小容器里会被浏览器截断为最大可能值，不如用50%稳定
为什么 border-radius: 50% 总是椭圆，不是正圆
border-radius: 50% 是按宽度算水平半径、按高度算垂直半径，宽高不等 → 必然椭圆。这不是 bug，是规范行为：
- 想得到正圆，唯一可靠方式：让元素宽高等值（如
width: 80px; height: 80px），再配border-radius: 50% - 现代方案可用
aspect-ratio: 1替代固定宽高，但 Safari 15.4 以下不支持，需 fallback - 别信“设大点就圆了”，
border-radius: 40px在80px × 60px元素上，右下角会溢出变直角
img 元素加圆角老是失败，关键在哪
border-radius 对它本身生效，但视觉裁剪常被干扰：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须显式设
width和height（不能只设一个，也不能依赖父容器 100%） - 父容器若没设
overflow: hidden，图片可能撑破圆角边界；但只靠父容器裁剪不够稳 - 最稳妥写法：
- 旧版 iOS Safari 可能漏渲染，加
overflow: hidden到
四个角要不同圆角，怎么写不晕
顺序就是顺时针：左上 → 右上 → 右下 → 左下。别记简写规则，直接写四值最安全：
-
border-radius: 4px 8px 12px 0= 左上 4px、右上 8px、右下 12px、左下 0（直角） - 如果只写三个值，比如
border-radius: 4px 8px 12px，等价于4px 8px 12px 8px（左下取第二个值），容易误判 - 单角控制更清晰：
border-top-right-radius: 8px比混在四值里改更易读、不易错 - 所有单角属性（如
border-bottom-left-radius）不支持百分比值，在 Safari 旧版有兼容问题，统一用px
真正卡住人的往往不是语法，而是元素没尺寸、父容器没裁剪、或者把 50% 当万能解——它只在正方形里画圆，其余全是椭圆。动手前先盯紧 width、height、overflow 这三样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
