首先我们来看一下实现效果,如下图所示:
重要属性:
text-shadow 属性向文本设置阴影。
(视频教程推荐:css视频教程)
HTML代码:
<div class="long-shadow">屮艸芔茻</div>
CSS代码:
.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); text-shadow+: (1px * @counter) (1px * @counter) #2d585a; } .long-shadow{ overflow: hidden; background-color: #5f9ea0; width:800px; height: 160px; line-height: 160px; text-align: center; letter-spacing: 80px; color: #fff; font-size: 100px; .loop(200); }
推荐教程:CSS入门基础教程
Atas ialah kandungan terperinci css如何实现字体长阴影效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!