直接用class切换border-radius没反应，大概率是图片未设固定宽高导致50%计算为椭圆、父容器缺少overflow: hidden致使溢出掩盖圆角，或内联样式优先级覆盖了class定义。
直接用 class 切换 border-radius 为什么没反应？
写了 .rounded { border-radius: 50% } 和 .square { border-radius: 0 }，但切换 class 后图片圆角不变——大概率是样式被覆盖或作用对象错了。
常见原因有三个：
-
img标签本身没设固定宽高，比如只写了width: 100%+height: auto，此时border-radius: 50%按宽高分别算，结果是椭圆，不是“没反应”，而是你看不出圆 - 父容器没加
overflow: hidden，尤其当你把border-radius加在<div> 上而非 <code><img>时，图片会溢出，圆角被盖住 - CSS 优先级问题：内联样式（
style="border-radius: 0"）比 class 高，动态加 class 会被它压住；检查浏览器开发者工具的“Computed”面板，看最终生效的是哪条规则 - 先用
max-width或aspect-ratio（现代浏览器）保证图片容器始终是正方形，比如width: 100%; aspect-ratio: 1 / 1; - 再用媒体查询控制圆角值：
@media (max-width: 768px) { .responsive-img { border-radius: 8px; } }，桌面端用50%，小屏用8px，超小屏回退到0 - 避免在媒体查询里重复写宽高，只改
border-radius和object-fit；object-fit: cover在小屏上比contain更可靠，防留白 - 所有图片提前裁成正方形（如 200×200 像素），别指望前端帮你裁
- HTML 中用内联样式：
<img src="..." style="max-width:90%" style="max-width:90%" style="border-radius: 100px;">（注意：这里用100px而非50%，因 Outlook 不认百分比） - 若需“直角/圆角”双版本，就得准备两套图片链接，用 Power Automate 的条件逻辑拼 HTML 字符串，而不是靠 class 切换
- 确保图片元素或其父容器设置了
display: block（默认inline会导致底部留白，干扰圆角视觉） - 如果圆角加在父
<div> 上，<code>overflow: hidden必须存在且不可被其他样式覆盖（比如overflow: visible !important会把它干掉） - 移动端 Safari 对小尺寸圆角（
）渲染不稳定，建议最小用 <code>4px，50%圆形则必须配width/height固定值，不能依赖vw或%
响应式场景下怎么让圆角/直角随屏幕尺寸自动切换？
不能靠 JS 监听 window.resize 然后反复改 class——性能差、易抖动、移动端触发频繁。用纯 CSS 媒体查询更稳。
关键点在于：把圆角逻辑和尺寸逻辑解耦。
Power Automate 邮件里圆角失效怎么办？
邮件客户端（Gmail、Outlook Web、Apple Mail）对 CSS 支持极弱：object-fit 被忽略、border-radius 只在部分支持内联样式的客户端中生效，且不支持百分比值（50%）。
唯一靠谱路径是预处理 + 内联 + 固定像素值：
JavaScript 动态切换时容易漏掉的裁剪兜底
用 JS 切换 class 或修改 style.borderRadius 后，图片看起来还是方的——不是代码没执行，而是缺少视觉裁剪保障。
必须同步检查并补全三点：
真正难的不是写对那行 border-radius，而是每次切换前，都得确认宽高是否锁死、裁剪是否启用、客户端是否认这个值——三者缺一，圆角就只是画了个边框，不是真裁出来。
