使边框图像与渐变一起使用答案

【问题标题】：Making border-image work with gradients使边框图像与渐变一起使用
【发布时间】：2016-04-15 09:16:45
【问题描述】：

我正在开发一个使用 react.js 和 sass 作为样式的 webapp（所以我所有的样式文件都是 .scss）。我有一个当前样式的文本框：

input[type=text] {
  text-align: center;
  font: inherit;
  border: 6px solid #999999;
  padding: 5px 5px;
  font-size: 15px;
  box-shadow: 0 1px 1px #DDD;
  width: 223px;
  outline: none;
  display: block;
  color: #7B8585;
  margin: 0 auto 20px;
}

在某些时候，我的应用想要更改边框颜色。这就是我所拥有的：

var borderStyle;
if (gradient) {
  borderStyle = {
    'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
  };
}

稍后，输入组件：

<input type="text" style={borderStyle} onChange={this.handleChange} />

目前我看到的是一个白色边框，边框的每个角落都有一个很小的红蓝色渐变图像。我试过使用borderColor，显然它根本不适用于渐变。我是否遗漏了一些明显的东西，或者无法做一个简单的边框渐变？

所需的结果是从左到右的渐变（因此左边框完全是蓝色，右边完全是红色，上下边框具有从蓝到红的过渡）。

针对Harry的回答，我改成如下代码：

if (gradient) {
  borderStyle = {
    borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
    borderImageSlice: 1
  };
}

在react docs for inline styles 中指定。但是，当我检查元素时，我定义的 borderImageSlice 属性丢失了；只有borderImage 在那里，我仍然在边框的角落只有微小的渐变。

【问题讨论】：

最终输出应该是什么样子？对于提供的当前渐变，左边缘（和左边框）将是蓝色的，它将向右变化，这样右边缘将是全红色。那是你要的吗？如果这是所需的输出，那么您只缺少一个额外的设置。
你在正确的轨道上，但你的渐变语法是错误的。
@HenrikAndersson：对于 webkit 特定的线性渐变，语法没有错。它会按原样工作。
编辑了主帖以阐明我想要的输出；从左到右的蓝色->红色渐变。此外，它在 Chrome 中运行，但可以很好地支持任何浏览器。

标签： javascript html css reactjs border

【解决方案1】：

您还需要在应用边框时添加border-image-slice 属性。这样做会根据您的需要提供准确的输出。

我在下面的 sn-p 中通过 CSS 本身添加了它（没有 JS），但你应该能够适应它:)

input[type=text] {
  text-align: center;
  font: inherit;
  border: 6px solid #999999;
  padding: 5px 5px;
  font-size: 15px;
  box-shadow: 0 1px 1px #DDD;
  width: 223px;
  outline: none;
  display: block;
  color: #7B8585;
  margin: 0 auto 20px;
  border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
  border-image-slice: 1;
}

&lt;input type="text" /&gt;

注意：我还修改了渐变语法以使用标准语法，使其适用于所有支持border-image 属性的浏览器。

下面是一个sn-p，当输入框中的文本改变时应用边框图像。

var ip = document.getElementById("inp");

ip.addEventListener("change", function() {
  this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
  this.style.borderImageSlice = '1';
});

input[type=text] {
  text-align: center;
  font: inherit;
  border: 6px solid #999999;
  padding: 5px 5px;
  font-size: 15px;
  box-shadow: 0 1px 1px #DDD;
  width: 223px;
  outline: none;
  display: block;
  color: #7B8585;
  margin: 0 auto 20px;
}

&lt;input type="text" id="inp" /&gt;

默认情况下，ReactJS 似乎将px 作为单位添加到为内联样式传递的所有数字中，因此border-image-slice: 1 被错误地设置为border-image-slice: 1px。由于此属性是 CSS 中的无单位属性，因此无法正确应用。解决方案是将此值包含在引号中，并在引号中添加分号（如以下代码示例中所示）：

var borderStyle = {
    borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
      borderImageSlice: '1;' // note the quotes and the semi-colon.
  };

发现这个问题的功劳归于Henrik Andersson。

JSBin Demo with ReactJS

【讨论】：

如果我把它放到我的 style.scss 表中，它工作正常。如果我把它放到我的 javascript 样式覆盖中，它不会。真是奇怪……
@IronWaffleMan：是的，这很奇怪。不幸的是，我不太了解 ReactJS 或它是如何工作的。您可以在某处展示演示吗？我也许可以帮助解决它。
当我检查元素时，它甚至不包括我添加的border-image-slice 属性。我正在使用此处指定的 react 内联样式语法 (facebook.github.io/react/tips/inline-styles.html)，所以我不知道出了什么问题...
@IronWaffleMan：我尝试用纯 JS 实现相同的功能（已将其添加到答案中），它似乎工作正常。也许这是 ReactJS 的问题。
@IronWaffleMan：您可以尝试在1 周围添加引号，看看它是否有效。这只是一个疯狂的猜测。

【解决方案2】：

我设法通过自己将1 / 1 / 0 stretch 添加到内联样式来解决这个问题，所以它看起来像这样：

var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`

【讨论】：