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

Question

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

我尝试修改我发现的示例中的一些现有代码，但我还没有完全到位。这里有几个小提琴来展示我所拥有的：

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

示例 2这是另一种选择，看起来我只需要添加底部边框，但我不知道如何做。

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

这是示例 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;
    }

小提琴