线性渐变边框底部不起作用

Question

我正在使用以下代码为我的网站 (https://howtogetrippedathome.com/) 中小部件标题下方的双下划线提供渐变颜色：

.widget-title:after {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

但是，当我应用此代码时，下划线消失了。我查看了其他主题，这应该可行，但我不知道我做错了什么。

Answer 1

而不是使用伪元素(:after)，直接试试这个：

.widget-title {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

Answer 2

在 css3 中，请使用带有 ::after 而不是 :after 的伪元素。并且请确保你至少为伪元素样式（内容：“”）指定空内容并指定显示属性.

.widget-title {
  width: 100px;
  height: 100px;
}
.widget-title::after {
  content: "";
  display: block;
  background: #ffba10;
  border-bottom: 6px double;
}

以上代码按预期工作。请参阅此 link 了解更多信息。

Answer 3

像这样简单地使用多重渐变

h1{
  display:inline-block;
  padding-bottom:5px;
  background: 
   linear-gradient(to left,  red, blue),
   linear-gradient(to left,  red, blue); 
  background-size:100% 2px;
  background-position:bottom 0 left 0,bottom 5px left 0;
  background-repeat:no-repeat;
}

<h1>some text</h1>

线性渐变边框底部不起作用

Linear gradient border bottom does not work

css

underline

linear-gradients