时间戳

首页 > 解决方案 > 组合框阴影和文本渐变

css - 组合框阴影和文本渐变

问题描述

是否有可能将文本渐变与框阴影结合起来？请参阅示例图像以了解我想要达到的目标。示例-图像

我已经实现了渐变，但是我之后添加的框阴影出现在前景中。我该如何解决？

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: inset 0px 30px white;
}

很想得到一些帮助！

谢谢！（对不起我的英语）

标签： csslinear-gradientsbox-shadow

解决方案

尝试添加一个 div，然后你可以使用 position 来解决你的问题。

h2 {
    display: inline-block;
    background-image:linear-gradient(90deg,#c93718 0%,#035b34 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 999999;
    position: absolute;
    
}
div{
    background-color: gray;
    height: 30px;
    width: 140px;
    position: absolute;
    top: 22px;
}
<h2>This is Demo</h2>
<div></div>

推荐阅读