标题经常字体是渐进色，同时添加阴影在大屏中，很多标题经常要求字体是渐进色的，一般方法是利用背景来实现。 .gradien

在大屏中，很多标题经常要求字体是渐进色的，一般方法是利用背景来实现。 .gradient-text { font-size: 36px; background: linear-gradient(180deg, #FFDBA4 37.41%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: #000; position: relative; display: inline; z-index: 2; }

但有时候又要求添加字体阴影。如果直接在字体中添加阴影的话，显示效果就像字体脏了一样。不能直接在原文字上直接添加阴影，这事我们需要再添加一个伪元素，通过对伪元素赋值相同的内容，调整好他的位置，并设定好相应的层级，就好像是叠加了一样。 content: attr(data-text); position: absolute; bottom: 3px; left: 0px; width: 100%; height: 100%; /* color: black; */ z-index: 1; background: linear-gradient(180deg, #FFDBA4 37.41%, #FFFFFF 100%); -webkit-background-clip: inherit; -webkit-text-fill-color: transparent;

所以可以通过添加伪元素来设置他的阴影，从而保证一个比较好的显示效果。如果大家能有什么更好的办法，可以一起交流下。

<!DOCTYPE html>
<html> 
<head> 
    <style>
        body { background-color: #fff; /* 设置一个背景颜色 */ text-align: center; /* 文本居中显示 */ } 
        .gradient-text { font-size: 36px; background: linear-gradient(180deg, #FFDBA4 37.41%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: #000; position: relative; display: inline; z-index: 2; } 
        .gradient-text::before { content: attr(data-text); position: absolute; bottom: 3px; left: 0px; width: 100%; height: 100%; /* color: black; */ z-index: 1; background: linear-gradient(180deg, #FFDBA4 37.41%, #FFFFFF 100%); -webkit-background-clip: inherit; -webkit-text-fill-color: transparent; /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 添加黑色阴影 */ } </style> 
  </head> 
        <body>
                    <h1><span class="gradient-text" data-text="Hello, World!">Hello, World!</span></h1> 
        </body> 
  </html>