css条纹状文字阴影

通过线性渐变,控制背景为白色-透明-白色-透明,然后控制背景大小,让背景background-repeat:repeat重复,就能实现斑马条纹
通过伪元素来实现时,因为伪元素的层级会高于原本元素,所以通过伪元素来展示文字,将条纹覆盖在原本文字上

代码示例:

 div {
     font-family: Times New Roman, 'serif';
     position: relative;
     font-size: 30px;
     width: 400px;
     text-align: center;

 }
             
 div::before {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
     background-size: 3px 3px;
     z-index: 1;
 }
     
 div::after {
     position: absolute;
     content:attr(data-name);
     top: -4px;
     left: -2px;
     right: 6px;
     bottom: 6px;
     color: red;
     z-index: 2;
 }

<div data-name="Solid Shadow Word">Solid Shadow Word</div>

效果图: