边框图像源：线性渐变仅读取一种颜色答案

【问题标题】：border-image-source: linear-gradient only reading one color边框图像源：线性渐变仅读取一种颜色
【发布时间】：2021-11-17 21:55:01
【问题描述】：

我正在尝试创建如下所示的边框渐变效果：

我有以下内容，但无论出于何种原因，没有读取第二种颜色，唉，边框只是呈现纯白色，没有渐变效果，这是在 chrome/mac 上。有什么建议或已知的怪癖吗？

  input { 
     height: 40px;
     padding: 8px 93px 13px 18px;
     border-style: solid;
     border-width: 2px;
     border-image-source: linear-gradient(294deg, #fff 105%, #68d9d5 71%, #68d9d5 71%);
     border-image-slice: 1;
  }

【问题讨论】：

标签： css

【解决方案1】：

您当前的线性渐变在所有可见区域都是白色的。

它这样做是因为#fff 105%, #68d9d5 71%, #68d9d5 71% 生成的渐变：

0-105%之间：#fff（由于0%未定义，使用第一种传入的颜色）
105-71% 之间：#68d9d5

有点不直观，首先出现的颜色最终位于渐变的顶部（可见性堆栈），因此 105-71% 的范围隐藏在初始白色区域的后面。

将其替换为 linear-gradient(95deg, #68d9d5 71%, #fff 100%); 将提供更接近的结果。

body {
  background-color: #0E2B47;
}

input {
  height: 40px;
  padding: 8px 93px 13px 18px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(95deg, #68d9d5 71%, #fff 100%);
  border-image-slice: 1;
  background: none;
}

&lt;input /&gt;

【讨论】：

太棒了，谢谢兄弟
所以 105-71% 的范围是隐藏的 --> 不是这样，你不能有重叠的范围。任何小的值都将被限制为最后一个范围中的最大值。所以浏览器会将 71% 转换为 105%。相关：stackoverflow.com/a/54071464/8620333 如果色标的位置小于列表中任何色标的指定位置，则将其位置设置为等于其之前任何色标的最大指定位置。