border-radius 是唯一可靠、现代且直接生效的图片圆角方案，它作用于 img 元素自身边角，需确保尺寸明确、父容器无干扰裁剪，并在邮件中必须使用内联样式。
border-radius 是唯一可靠、现代且直接生效的方式。它不是“给外框加弧度”，而是让元素（包括 img）自身的边角产生圆角效果——视觉上就是图片带了圆角边框。
为什么直接对 img 用 border-radius 就行
img 是替换元素，但现代浏览器（IE9+、Chrome、Firefox、Safari、Edge）都支持对其直接应用 border-radius，无需额外容器或伪元素。
关键前提是：
- 图片必须有明确的尺寸（width 和 height 都设，或至少宽高比固定）
- 父容器不能设置 overflow: hidden 以外的裁剪干扰（比如 clip-path 覆盖）
- 不要依赖 outline 模拟“外框”——它不响应 border-radius，且位置不可控
例如，这张图要变圆角：
@@##@@
它会四个角都变成 16px 半径的圆角；若写 border-radius: 50%，且宽高等于 120px，则变成正圆。
border-radius 多值写法控制不同角
单个数值（如 8px）作用于全部四角；但你常需要左上圆、右下直这种组合：
- border-radius: 8px 0 4px 0 → 顺时针：左上、右上、右下、左下
- border-radius: 12px 4px → 左上/右下为 12px，右上/左下为 4px（两值缩写）
- border-radius: 10px / 5px → 水平半径 / 垂直半径（椭圆角，极少用，慎用）
注意：百分比值是相对于元素自身宽高的，不是父容器。所以 border-radius: 20% 在宽 200px 高 100px 的图上，左右角水平半径为 40px，上下角垂直半径为 20px——结果是不对称椭圆角，容易出错。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
邮件场景（Power Automate / Gmail）必须用内联样式
Gmail、Outlook Web、Yahoo 等邮件客户端会剥离 标签和 class 定义，只认 style="" 属性：
- ✅ 正确：
Power Automate 动态生成时，可这样拼接：
@@##@@
同时注意：邮件中优先用 width="180" 而非 style="width:180px"，因部分客户端对 style 中的尺寸解析不稳定。
常见失效原因和绕过方式
- 图片没设 height，仅靠 width="100%" 或 max-width → 浏览器无法计算 50% 对应多少，圆角不生效
- 父容器有 overflow: hidden 且图片未完全居中 → 圆角被截掉，看起来像“缺角”
- 使用了 object-fit: contain 且图片比例与容器不匹配 → 内容留白，圆角区域空着，显得不自然
- 旧 Android（4.3 以下）不支持 border-radius 百分比 → 若必须兼容，用大像素值替代，如 border-radius: 999px（视觉上等效 50%）
真正难的不是写法，而是判断哪一层在干扰圆角：是图片自身尺寸？父容器溢出？还是邮件客户端过滤？先查渲染后的 computed styles，再逐层关掉父级样式验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
