css - 文本以外的其他元素中的渐变颜色

Question

在我的主页 ( https://howtogetrippedathome.com/ ) 上，我想为所有(现在)红色元素提供渐变色。

我设法使用以下 CSS 为菜单项、服务标题和服务图标提供渐变颜色:

.service-icon.wow.zoomInDown {
    background: linear-gradient(to bottom right, #ff2828 , #F27B26) !important;
    }
    .service-title {
    background: -webkit-linear-gradient(bottom left, #ff2828 , #F27B26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

但是，我无法使小部件标题的文本装饰(双下划线)、阅读我的故事/查看所有博客按钮和社交图标(Facebook 和 Instagram)成为这种渐变。不幸的是，在“颜色:”之后使用“线性渐变”不起作用。

这是可行的，还是我要求的是不可能的事情？我很好奇你们要说什么。

最好的，马丁

Answer 1

我最接近双下划线的是这个(参见 https://howtogetrippedathome.com/ ):

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

但是，这会产生在关于部分中仍然可见的白色双边框的效果。将边框颜色设置为透明会导致边框和内边距都具有渐变颜色，因此它们形成一个矩形。

另一种方法是使用:

-webkit-border-image:  -webkit-gradient(...)

但我无法让它工作。

有什么想法吗？