Rumah > hujung hadapan web > tutorial css > css如何实现字体长阴影效果

css如何实现字体长阴影效果

王林
Lepaskan: 2020-05-18 09:12:45
ke hadapan
3062 orang telah melayarinya

css如何实现字体长阴影效果

首先我们来看一下实现效果,如下图所示:

53b3b233f9f2611fca0b692a02827c0.png

重要属性:

text-shadow 属性向文本设置阴影。

(视频教程推荐:css视频教程

HTML代码:

<div class="long-shadow">屮艸芔茻</div>
Salin selepas log masuk

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);
  }
Salin selepas log masuk

推荐教程:CSS入门基础教程

Atas ialah kandungan terperinci css如何实现字体长阴影效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:jb51.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan