如何在HTML指定区块中为图片设置border-radius圆角效果

解决方案 #

方法1：使用内联样式（最稳妥，无样式冲突风险）

直接修改目标<img>标签，添加style属性即可，无需额外编写CSS块，完全不会影响全站其他元素样式：

<!-- img为单标签，不需要额外的</img>闭合标签，不规范的标签写法本身也可能导致布局错乱 -->
<img src="{% static 'image.png' %}" height="400" style="border-radius: 16px;">

你可以自行调整border-radius的数值，需要圆形效果直接写50%即可。

方法2：使用精准CSS选择器

如果你希望统一管理样式、不使用内联写法，可以编写仅匹配目标图片的CSS规则，注意选择器要足够精准，不要使用img{}这类全局选择器：
你可以把以下<style>块放在页面的<head>标签内，或者放在当前section的上方都可以：

<style>
/* 仅选中class为image_class的h2标签下的img元素，不会影响页面其他图片 */
h2.image_class img {
  border-radius: 16px;
}
</style>

之前样式错乱的常见原因 #

• 之前编写的CSS选择器过于宽泛，比如直接写img{}会修改全站所有图片的样式
• 原有代码中img标签使用了多余的</img>闭合标签，属于HTML语法不规范，可能导致浏览器解析布局出错
• 把img放在h2标题标签内，会继承h2的默认边距、行高等样式，也可能导致图片位置偏移，建议把包裹img的h2标签改为普通div标签更合理。

内容的提问来源于stack exchange，提问作者ThorstenMagic