代码之家 › 专栏 › 技术社区 › MaartenN

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

underline gradient css

0

MaartenN · 技术社区 · 6 年前

我正在使用下面的代码在我的站点上给双下划线( https://howtogetrippedathome.com/ )在我的小部件标题下面是渐变色:

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

然而,当我应用此代码时,下划线会消失。我看了其他的话题,这应该行得通,但我不知道我做错了什么。

3 回复 | 直到 5 年前

1

Temani Afif 5 年前

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

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>

2

0

nazir_cinu 6 年前

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

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

3

0

Lawrence 6 年前

在css3中,请使用伪元素with::after而不是:after。请确保伪元素样式(content:)至少有一个空内容,并指定display属性。

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

以上代码按预期工作。请参考这个 link 更多信息。