CSS线性渐变子元素上下出现透明条如何修复？

问题原因&修复步骤 #

1. 颜色值语法错误：子div的border-image渐变里，最后一个颜色ab7b3d没加#前缀，浏览器无法识别这个颜色，会导致边框渐变渲染异常，进而影响背景显示。
2. 盒模型未设置：默认的content-box盒模型下，height:200px仅计算内容区域高度，加上10px上下边框后，整个元素高度变成220px，超出父div的200px高度；同时背景默认只填充到内容+内边距区域，边框区域无背景，就会出现上下透明条。
3. 背景填充范围问题：默认background-clip: padding-box，背景不会覆盖边框区域，结合盒模型问题，直接露出边框区域的空白/透明。

修复后的代码 #

<div class="scroll cover red" style="display: inline-block; width: 900px; height: 200px; max-width: 90%; background: linear-gradient(#b15960, #bf676f, #9d4b52); margin-left: auto; margin-right: auto; margin-top: -150px;">
        the child element with the problem below---&gt;
    <div class="scroll cover green with gold border" style="display: inline-block; width: 750px; height: 200px; max-width: 80%; box-sizing: border-box; background: linear-gradient(#506d63, #5f7e77, #405d55); border-width: 10px; border-style: solid; border-image: linear-gradient(to bottom, #c49648, #f7d692, #ab7b3d) 1; margin: auto;"></div>
</div>

关键修改点说明 #

• 给子div添加box-sizing: border-box：让height:200px包含边框宽度，元素整体高度不超出父div，同时背景可填充到边框区域。
• 修正border-image颜色值：把ab7b3d改为#ab7b3d，保证边框渐变正常渲染。
• 移除background的no-repeat：渐变会自动铺满整个border-box区域，不需要重复。
• 简化border-image的slice值：设为1即可让渐变边框正确拉伸显示。

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