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）达到这个梯度。不幸的是，在“ color：”之后使用“ linear-gradient”。

这可行吗，还是我要求做一些不可能的事情？我很好奇你们怎么说。

最好，马尔滕

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

对于渐变文本，您可以执行以下操作：

mainform.cpp

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

对于双下划线，最好的选择是使用background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent;并设置渐变背景。

有一种<hr>样式，但不接受渐变。

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

2 个答案: