首页#header .header h1{ position: relative; top: -10px; font-size: 40px; background-image: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff, #0070f0 , #607cfa); -webkit-background-clip: text; /* 渐变区域：文本 */ -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */ font-family:"Adobe 楷体 Std R"; text-shadow: 3px 3px 3px rgba(0,0,0,0.5); }这段代码导致字体阴影在文本上面，怎么调整成被文本挡住

#header .header h1{ position: relative; top: -10px; font-size: 40px; background-image: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff, #0070f0 , #607cfa); -webkit-background-clip: text; /* 渐变区域：文本 / -webkit-text-fill-color: transparent; / 设置文本颜色为透明 */ font-family:"Adobe 楷体 Std R"; text-shadow: 3px 3px 3px rgba(0,0,0,0.5); }这段代码导致字体阴影在文本上面，怎么调整成被文本挡住

时间: 2024-02-10 13:13:27 浏览: 55

深入剖析CSS中的线性渐变linear-gradient

在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变两种，本文介绍线性渐变。定义　　渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。 [注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线

将 `text-shadow` 属性中的偏移量的垂直方向值改为负值，就可以让字体阴影显示在文本下面，而被文本所挡住。比如将 `text-shadow` 属性的值改为： ```css text-shadow: 3px -3px 3px rgba(0,0,0,0.5); ``` 这样就可以让字体阴影显示在文本下面了。

阅读全文