如何在左右边框上放置两个线性渐变？

Question

我希望创建一个左右边框宽的黄色 div。朝着 div 的外边缘，左右边框的颜色逐渐变细为白色，以模拟透明度。

到目前为止，我已经能够构造 div，但不能构造渐变：

.fade {
  margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
  background: rgb(242,242,194);

  border-right: 3em black solid;
  border-left: 3em black solid;
  border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{

<div class="fade">Text</div>

上面可以看到发生的情况：线性渐变正确地覆盖了黑色以形成黄色边框，但没有我正在寻找的渐变为白色。事实上，根本没有渐变。

最终产品应如下所示：

我哪里错了？

Answer 1

如果您不熟悉渐变并且不想弄乱它们，您应该使用 Colorzilla 渐变工具：http://www.colorzilla.com/gradient-editor/

    .fade {
      margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
      background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
    }

<div class="fade">Text</div>

也许这样的东西会有用？

我会解释我做了什么。

我删除了所有包含border 的属性，我只使用了background。

background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);

这个渐变有4个步骤：

• 第一步表明渐变必须以白色开始。
• 第二步（元素宽度的 5%）表示渐变跟随黄色。
• 直到第三步（元素宽度的 95%）。
• 然后，在第四步中，它再次以白色结束。

注意这个百分比是针对宽度的，因为您已经将渐变旋转了 90 度，使用 0 或 360 会影响渐变的高度部分。

最后一个细节，您需要在 div 内添加一些填充，以使文本看起来与您的照片一模一样。

Answer 2

div {
  background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 8%, rgb(242, 242, 194) 92%, white 100%);
  padding: 15px;
  margin: 30px;
}
p {
  padding-left: 50px;
}

<div><p>Text</p></div>