重复线性渐变+背景裁切字体效果
<style>.mybox {
margin: 20px;
font: bold 2.4em sans-serif;
color: transparent;
background: repeating-linear-gradient(90deg, white 2px, navy 4px);
-webkit-background-clip: text;
position: relative;
}
</style>
<div class="mybox">huachao<br>HUACHAO<br>花潮论坛<br>花潮論壇</div>
代码极简：
<style>
.mybox {
margin: 20px auto;
width: 400px;
height: 200px;
font: bold 2.4em sans-serif;
color: transparent;
background: repeating-linear-gradient(90deg, white 2px, navy 4px);
-webkit-background-clip: text;
position: relative;
}
</style>
<div class="mybox">huachao<br>HUACHAO<br>花潮论坛<br>花潮論壇</div>
改变线性渐变角度，改变颜色，改变颜色终结点，甚至，改变 background-size，可营造更多神奇的效果 background-clip，目前Firefox和Chromium都支持，需要前缀 -webkit- 就这么个竖排的条纹，竟然美的不可方物。太赞了{:4_199:} 因为文字的空间走向，让切割出来的条纹那么美的呢{:4_171:} 收藏起来，这个太美了{:4_187:} 红影 发表于 2024-2-1 23:11
收藏起来，这个太美了
还可以的吧 红影 发表于 2024-2-1 23:09
就这么个竖排的条纹，竟然美的不可方物。太赞了
可以变换一下方向，如果熟悉背景制作，还可以加上复杂的多个渐变 红影 发表于 2024-2-1 23:11
因为文字的空间走向，让切割出来的条纹那么美的呢
美是一种感觉 马黑黑 发表于 2024-2-1 23:41
还可以的吧
黑黑可以把这个也放入文字仓库里呢{:4_187:} 马黑黑 发表于 2024-2-1 23:42
可以变换一下方向，如果熟悉背景制作，还可以加上复杂的多个渐变
好像其他方向的见过的吧，就这个竖条纹的没见过{:4_173:} 马黑黑 发表于 2024-2-1 23:42
美是一种感觉
又去看了几遍，还是非常喜欢{:4_199:} 红影 发表于 2024-2-2 10:24
又去看了几遍，还是非常喜欢
这些都是普通CSS属性的应用 红影 发表于 2024-2-2 10:24
好像其他方向的见过的吧，就这个竖条纹的没见过
横竖都好看 红影 发表于 2024-2-2 10:23
黑黑可以把这个也放入文字仓库里呢
仓库还有空间吗 马黑黑 发表于 2024-2-2 17:51
这些都是普通CSS属性的应用
这个也可以做成簸箕的底纹吧{:4_173:} 马黑黑 发表于 2024-2-2 17:51
横竖都好看
是的，或者45度的也好看。 马黑黑 发表于 2024-2-2 17:52
仓库还有空间吗
当然有啊，那诗歌内容丰富的大仓库呢{:4_187:} 红影 发表于 2024-2-2 19:58
当然有啊，那诗歌内容丰富的大仓库呢
我又不懂诗歌仓库