具有渐变边框但对于文字透明背景的Div

Question

我有一个带有文本的div，我想给它一个渐变边框，但是内部应该是透明的，因为有一个背景图片。我尝试修改一些现有的代码示例，但还没有完全成功。这里有几个fiddles可以展示我的进展: 示例1 实际上已经非常接近了，除了渐变应该从左到右而不是从上到下。我尝试改变渐变的方向，但是除非我将background-size更改为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;
}

提前感谢。

- brunn

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

- vals

---

如何为具有渐变边框的透明按钮设置圆角？ - volvereabhi