`border-radius` 无法直接作用于 `` 元素的父容器（如 `#img`），必须显式选中图片自身（如 `#img img`）才能生效；本文详解原理、正确写法及常见陷阱。
在 CSS 中，border-radius 是一个作用于块级或替换元素（replaced element）自身的边框属性。<img>（注意：应使用标准 <img> 标签而非已废弃的 <image>）属于替换元素，其圆角效果需直接应用于该标签，而非其外层容器。
你当前的 CSS 规则：
#img {
border-radius: 15px;
}实际作用对象是 <div id="img"> 这个 容器盒子，而 <img> 默认是内联元素，且未设置 overflow: hidden —— 即使容器有圆角，内部图片仍会“溢出”显示为直角矩形。这就是为何圆角“不生效”的根本原因。
✅ 正确做法：通过后代选择器精准定位图片本身
将 CSS 修改为：
#img img {
display: block;
float: right;
margin: 0 0 15px 20px;
padding: 10px;
background-color: #FFFFFF;
margin-right: 50px;
border-radius: 15px; /* ✅ 现在作用于 img 元素自身 */
}同时，请务必修正 HTML 中的错误标签：
❌ 错误（非标准、已废弃）：
<image src="assets/pv250.jpg"></image>
✅ 正确（W3C 标准）：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<img src="assets/pv250.jpg" alt="Solar PV system">
? 补充说明：<image> 是 SVG 中的元素，在 HTML 文档中无效；浏览器会将其忽略或降级处理，导致样式不可预测。务必使用 <img>。
? 进阶技巧：若需兼容旧图（如无 alt 属性）或增强可访问性，可添加：
#img img {
vertical-align: middle; /* 消除底部空白 */
max-width: 100%; /* 响应式安全 */
height: auto;
}⚠️ 注意事项：
- 不要重复声明 border-radius（你原代码中写了两次：5px 和 15px），后者会覆盖前者；
- 若图片父容器（如 #img）设置了 overflow: hidden，也可实现“视觉裁剪圆角”，但这是 hack 方式，不如直接作用于 <img> 可靠、语义清晰；
- 所有需圆角的图片应统一包裹在带唯一 ID/类的容器中（如 #img, #geo-img, #turbine-img），再分别编写对应规则，避免全局 img { border-radius: ... } 影响 logo 等无需圆角的图像。
总结：CSS 圆角生效的前提是——样式必须作用于具有内容渲染区域的元素本身。对图片而言，就是 <img> 标签，而非它的父 <div>。精准选择器 + 标准 HTML 标签 + 合理属性组合，才是可靠实现的关键。
