css中如何做文字长阴影的立体效果？

发布时间：2023-08-03 13:57:44 所属栏目：语言来源：

导读： 这篇文章给大家分享的用css给文字添加阴影的内容，整体的实现就是文字添加长阴影的效果，这样的好处就是可以增加字体的立体感，那么具体怎样做呢？下面我们一起来了解一下。

主要知识点

css中的字体阴影 te

这篇文章给大家分享的用css给文字添加阴影的内容，整体的实现就是文字添加长阴影的效果，这样的好处就是可以增加字体的立体感，那么具体怎样做呢？下面我们一起来了解一下。

主要知识点

css中的字体阴影 text-shadowless

语法中的 loops 和 merge代码

<div class="long-shadow">屮艸芔茻</div>

.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);

  }

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!