css实现文字的条纹阴影效果

先写下一段文字

添加重复的线性渐变，该渐变倾斜45deg（倾斜角度依需求设置）

上面的为黑色、透明色的渐变，实际上渐变的颜色需要跟文字的背景颜色相同，如果文字的背景色是白色那么渐变的颜色就是白色、透明色，白色用来融入背景，透明色用来显示被遮住的文字，如下:

写下相同的文字，覆盖条纹阴影，调整文字的位置即可

代码如下：

<div class="DarkBox" data-descr="Dark Side">Dark Side</div>

.DarkBox{margin:50px;width: 700px;height: 80px;line-height: 80px;text-align: center;font-family: 'GandiaBold';position: relative;color: #858585;font-size: 60px;&::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: repeating-linear-gradient(45deg,#fff 0px 2px , transparent 2px 4px);}&::after{content: attr(data-descr);position: absolute;width: 100%;height: 100%;left: -4px;top: -4px;color: #333333;}
}

伪元素动态值
这里有一个小知识点，伪元素的的content可以设置动态值，页面标签中设置data-descr="xxx"，伪元素content中的值为attr(data-descr)那么伪元素的data-descr就是页面标签中设置的'xxx'，如果页面标签中的data-descr属性写成动态值，如:data-descr='textInfo'，那么伪元素attr(data-descr)的值会进行关联变成动态值。

<div class="text" :data-descr='textInfo' @click="textChange"></div>const textInfo = ref('点击更改')
const textChange = () => textInfo.value = '动态值'

.text{text-align: center;position: relative;color: #858585;font-size: 60px;cursor:pointer;&::before{content: attr(data-descr);position: absolute;color: #333333;}
}

应用在刚才的案例上：

案例源码：https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~

css实现文字的条纹阴影效果相关推荐

html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)
这里用css实现不用滤镜实现阴影效果.代吗及详解如下: xhtml代码: 例如: href="http://www.goodjob.cn/">中国俊才网中国俊才网 href= ...
CSS(二)文字样式
CSS之文字样式一.文本颜色:color 二.缩进:text-indent 三.行高:line-height 四.字母间隔:letter-spacing 五.水平对齐:text-align 六.文本 ...
html b 文字阴影,如何用css实现文字阴影？
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等.下面本篇文章就来给大家介绍一下使用CSS实现文字阴影效果的方法,希望 ...
html css如何渐变阴影,CSS 实现文字阴影 + 文字渐变色
1. CSS 实现文字阴影通过text-shadow属性可以为文字设置阴影 .text-shadow { font-size: 30px; color: maroon; text-shadow: 5 ...
php 中文过长省略号,css实现文字过长显示省略号
本篇文章介绍了css实现文字过长显示省略号的方法,具有一定的参考价值,希望对学习css的朋友有帮助! 一.CSS样式解决文字过长显示省略号问题 1.一般样式一般 css 样式,当宽度不够时,可能会 ...
CSS设置文字的划线
CSS设置文字的划线文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
css段落文字（中英文混杂）实现两端对齐
案例如下: 混合使用汉字和英文的段落默认如下: 两边是不对齐的(一般情况下,我们对这种情况不做处理,除非需求或者设计非要我们实现两端对齐). 对齐之后如下: 实现思路一般的两端对齐是使用text-a ...
css 中文文字字体_使用CSS的网络字体
css 中文文字字体 CSS | 网络字体 (CSS | Web fonts) Web fonts allow people to use fonts that are not pre-install ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

css实现文字的条纹阴影效果

css实现文字的条纹阴影效果相关推荐

最新文章

热门文章