css3中less实现文字长阴影(long shadow)


Posted in HTML / CSS onApril 24, 2020

本文主要介绍了css3中less实现文字长阴影,分享给大家,具体如下:

问题

实现如下图效果

css3中less实现文字长阴影(long shadow)

主要知识点

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

 到此这篇关于css3中less实现 文字长阴影(long shadow)的文章就介绍到这了,更多相关less文字长阴影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
Node.js编码规范
2014/07/14 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python 根据pid杀死相应进程的方法
2017/01/16 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Flask配置Cors跨域的实现
2019/07/12 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Django密码存储策略分析
2020/01/09 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
小学班干部竞选演讲稿
2014/04/24 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
MYSQL 表的全面总结
2021/11/11 MySQL
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫