渐变背景元素底部两角出现异常白色轮廓的技术问题

你遇到的白边是因为子元素.layer未匹配父容器的圆角，加上浏览器渲染渐变时的抗锯齿特性导致的。按以下几点调整即可解决：

• 给.layer添加与父容器一致的border-radius: 20px，让它的圆角和父容器完全对齐
• 移除.layer中多余的background-clip: padding-box和outline-offset属性，这些会干扰圆角区域的渲染
• 可选：给.layer加transform: scale(1.01)，让它稍微超出父容器范围，彻底盖住极端情况的白边

修改后的完整CSS代码：

.project {
    display: inline-block;
    width: 300px;
    height: 350px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 10px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    vertical-align: middle; /* 修正原代码错误：vertical-align无center值，应为middle */
}
.layer {
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgb(0, 0, 0));
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 20px; /* 新增：匹配父容器圆角 */
    transform: scale(1.01); /* 可选：彻底覆盖边缘白边 */
}

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