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

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

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

另一种方法是使用：

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

但我不能让它工作。

有什么想法吗？

Answer 2

对于渐变文本，您可以这样做：

background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

来源：https://css-tricks.com/snippets/css/gradient-text/

对于双下划线，最好的选择是使用<hr> 并设置渐变背景。

有一个text-decoration-color 样式，但它不接受渐变。