css实现文字条纹阴影效果
时间：2023-03-28 00:04:02
HTML
先写一段文字，加上重复的线性渐变。坡度为45deg倾斜（倾斜角度根据要求设定）。上面是黑色和透明色的渐变。其实渐变的颜色需要和文字的背景颜色一样。如果文字的背景颜色是白色，那么渐变的颜色就是白色透明。白色用于融入背景，透明用于显示被覆盖的文字，如下：写同样的文字，覆盖条纹阴影，调整文字的位置。代码如下：DarkSide
.DarkBox{margin:50px;宽度：700px；高度：80px；行高：80px；-family:'GandiaBold';位置：相对；颜色：#858585；字体大小：60px；&::之前{内容：'';位置：绝对；左：0；顶部：0；宽度：100%；:100%;背景：重复线性渐变（45deg，#fff0px2px，透明2px4px）；}&::after{内容：属性（数据描述）；位置：绝对；宽度：100%；高度：100%；左：-4px；顶部：-4px；颜色：#333333；}}伪元素动态值这里有一个小知识点，伪元素的内容可以设置一个动态值，在页面标签xxx中设置data-descr=""，伪元素内容中的值为attr(data-descr)，然后是伪元素的数据-descr是页面标签中设置的'xxx'。如果页面标签中的data-descr属性写成动态值，比如：data-descr='textInfo'，那么伪元素attr(data-descr)的值就会被关联起来，变成动态的价值。
consttextInfo=ref('点击更改')consttextChange=()=>textInfo.value='dynamic值'.text{text-align:center;位置：相对；颜色：#858585；字体大小：60px；光标：指针；&::before{内容：属性（数据描述）；位置：绝对；颜色：#333333；}}应用于刚才的案例：案例源码：https://gitee.com/wang_fan_w/css-diary如果您觉得本文对您有帮助，欢迎点赞收藏转发~
