border-image-source使用linear-gradient仅识别单种颜色如何解决

问题根因 #

你的CSS渐变语法存在色标顺序错误：
linear-gradient() 中的色标会按照位置值从小到大自动排序，你将位置为105%的#fff写在最前面，远大于后续色标的71%位置，实际渲染时相当于整个渐变区间的100%范围内都是偏白色的过渡效果，自然看不到青色的渐变。

修复方案 #

调整色标顺序，将位置值小的色标放在前面，示例如下：

input { 
  height: 40px;
  padding: 8px 93px 13px 18px;
  border-style: solid;
  border-width: 2px;
  /* 调整色标顺序，71%位置前为青色，之后过渡到白色 */
  border-image-source: linear-gradient(294deg, #68d9d5 71%, #fff 100%);
  border-image-slice: 1;
}

如果需要实现带圆角的渐变边框，border-image 不支持圆角效果，可以改用background-clip方案实现：

input {
  height: 40px;
  padding: 8px 93px 13px 18px;
  border: 2px solid transparent;
  border-radius: 4px; /* 自定义圆角值 */
  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(294deg, #68d9d5 71%, #fff 100%) border-box;
}

以上写法兼容所有主流现代浏览器，Mac端Chrome可以正常渲染，不存在兼容问题。

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