CSS：添加偏移量时如何让linear-gradient过渡更均匀？

可以明显看到黄色实色区域未实现自然的渐变过渡，请问在添加偏移量的情况下，如何让该区域实现自然的渐变过渡？

原CSS代码：

html::before {
    content: "";
    display: block;
    position: sticky;
    top: 0;
    border-top: 50px solid yellow;
    border-image: linear-gradient(to bottom, yellow 40%, transparent) 120;
}

解决方案 #

你当前用border-image搭配border-top的写法逻辑有误，border-image是基于边框区域渲染的，没法实现你要的整体平滑渐变效果。改用background-image结合线性渐变就能解决，同时保留position:sticky的特性：

html::before {
    content: "";
    display: block;
    position: sticky;
    top: 0; /* 这里可以根据需求调整偏移量 */
    height: 50px; /* 对应原border-top的高度 */
    background: linear-gradient(to bottom, yellow, transparent);
    /* 若要自定义过渡范围，可调整色标百分比，比如：
    background: linear-gradient(to bottom, yellow 60%, transparent 100%);
    */
}

如果需要设置非0的偏移量，直接修改top属性值即可，背景渐变会自然覆盖整个元素高度，实现平滑过渡。要是想让渐变衔接更贴合需求，调整色标的百分比就能控制黄色保留的区域和过渡的长度。

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