Question

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

我尝试从我发现的示例中修改一些现有代码，但我还没有完成。这里有几个小提示来展示我的成就：

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

Example 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;
    }

fiddle

Div带渐变边框，但文字透明背景

1 个答案: