css - 具有渐变边框但文本背景透明的 Div

Question

我有一个带有一些文本的 div，我想给它一个渐变边框，但 div 的内部是透明的，因为有一个背景图像。

我尝试根据我发现的示例修改一些现有代码，但我还没有完全做到。这里有几个 fiddle 来展示我所拥有的:

Example 1这实际上非常接近，除了渐变应该从左到右而不是从上到下。我尝试更改渐变的方向，但除非我将背景大小更改为 100%，否则不会显示更改，如果我将大小更改为 100%，那么背景会重复，我会丢失透明部分。

Example 2这是另一种选择，看来我只需要添加底部边框，但我不知 Prop 体怎么做。

如果有人可以看一下并给我一些建议，我将不胜感激。

这是示例 1 的 CSS。

.box{
    border-top: 5px solid #c13041;
    border-bottom: 5px solid #bd9600;
    background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#c13041), to(#bd9600));
    background-image: -webkit-linear-gradient(#c13041, #bd9600);
    background-image: -moz-linear-gradient(#c13041, #bd9600), -moz-linear-gradient(#c13041, #bd9600);
    background-image: -o-linear-gradient(#c13041, #bd9600), -o-linear-gradient(#c13041, #bd9600);
    background-image: linear-gradient(#c13041, #bd9600), linear-gradient(#c13041, #bd9600);
    background-size: 5px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}

和示例 2。

    .box{
        border-left: 5px solid #c13041;
        border-right: 5px solid #bd9600;
        background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, from(#c13041), to(#bd9600)), -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
        background-image: -webkit-linear-gradient(to right, #c13041, #bd9600), -webkit-linear-gradient(180deg, #000, transparent), -webkit-linear-gradient(180deg, #000, transparent);
        background-image: -moz-linear-gradient(to right, #c13041, #bd9600), -moz-linear-gradient(to right, #c13041, #bd9600), -moz-linear-gradient(180deg, #000, transparent), -moz-linear-gradient(180deg, #000, transparent);
        background-image: -o-linear-gradient(to right, #c13041, #bd9600), -o-linear-gradient(to right, #c13041, #bd9600), -o-linear-gradient(180deg, #000, transparent), -o-linear-gradient(180deg, #000, transparent);
        background-image: linear-gradient(to right, #c13041, #bd9600), linear-gradient(to right, #c13041, #bd9600), linear-gradient(90deg, #000, transparent), linear-gradient(90deg, #000, transparent);
        background-size: 100% 5px;
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
}

提前致谢。

Answer 1

您的示例 1，已更正(仅适用于现代语法)

.box {
  width: 300px;
  padding: 40px 20px;
  border-left: 5px solid #c13041;
  border-right: 5px solid #bd9600;
  background-image: linear-gradient(90deg, #c13041, #bd9600), linear-gradient(90deg, #c13041, #bd9600);
  background-size: 100% 5px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

<div class="box">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

fiddle