图片border-radius属性不生效求助，已尝试多种方案无效

先看你代码里的核心问题：给img设置了display: flex和justify-content: space-between，这俩属性是给**flex容器（比如div、section这类容器元素）**用的，放在img这种替换元素上完全不适用，会直接打乱它的盒模型渲染，导致border-radius根本没法正常生效。

具体修复步骤： #

• 删掉img样式里的display: flex和justify-content: space-between
• 给img加上display: block（或者inline-block），确保它的盒模型是标准块级/行内块级，让border-radius能正确作用在元素上
• 如果图片尺寸和预期不符，可以加上object-fit: cover避免拉伸变形，同时保证圆角正常显示

修改后的代码：

section {
    background-color: #e6e6e6;
    border-radius: 25px; /* 正常生效 */
    height: 450px;
    text-align: center;
    opacity: .95;
    overflow: hidden;
    width: 90%;
    margin: 150px auto;
}

section img {
    border-radius: 10px; /* 现在应该正常生效 */
    display: block;
    margin: 0 auto; /* 配合父元素的text-align:center，确保图片居中 */
    padding: 35px;
    /* 可选：如果图片拉伸变形，加上下面这行 */
    /* object-fit: cover; */
}

为什么你之前试的方法没用？ #

• overflow:hidden：这是用来让父元素裁剪超出自身圆角的内容，和子元素自己的圆角是否生效无关
• !important：你的问题不是样式优先级不够，而是display属性错误导致渲染异常，所以加了也没用
• border-collapse：这是表格元素的属性，和img完全不沾边
• perspective：用于3D变换场景，和圆角渲染没有关系

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