使用渐变使边框图像工作

Question

我正在开发一个使用 react.js 和 sass 作为样式的 web 应用程序（所以我所有的样式文件都是 .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的回答，我改成如下代码：

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;
}

如内联样式的反应文档中所述。但是，当我检查元素时，borderImageSlice我定义的属性丢失了；只有borderImage一个在那里，我仍然只有边界角落的微小渐变。

Answer 1

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

我已经在下面的代码片段中通过 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;
}

<input type="text" />

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

下面是当输入框中的文本更改时应用边框图像的片段。

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;
}

<input type="text" id="inp" />

默认情况下，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发现这个问题的功劳很大。

使用 ReactJS 的 JSBin 演示