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

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>

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

How do I put two linear-gradients on the left and right border?

html

css

linear-gradients