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

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 中添加一些填充以使文本看起来与您的照片完全一样。