使用Html5、CSS实现文字阴影效果


Posted in HTML / CSS onJanuary 17, 2018

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影.

一.文字阴影

text-shadow 文字阴影参数: 参数1 : 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 参数2 :第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值参数4 : 设置对象的阴影的颜色

text-shadow: 10px 10px 50px #000;

二.实例

使用Html5、CSS实现文字阴影效果

上图的效果我们怎样来实现呢?  

HTML结构 CSS样式字体样式字体颜色文本阴影 那我们来看一下具体代码:

HTML:  

<div class="text">【千锤百炼】尚学堂</div>

CSS:  

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本阴影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}

现在我们来看看前端小美女问我的效果该怎么做..

使用Html5、CSS实现文字阴影效果

其实非常简单了,我们来直接上代码~

HTML:

<div class="text">【千锤百炼】尚学堂</div>

CSS:  

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

发散你的思维,其实css3样式非常有趣,有时候往往是一点点改变,就可以实现很炫的效果^.^  

总结

以上所述是小编给大家介绍的使用Html5、CSS实现文字阴影效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
canvas烟花特效锦集
Jan 17 #HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 #HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 #HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 #HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 #HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 #HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 #HTML / CSS
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PDO::exec讲解
2019/01/28 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
python中的编码知识整理汇总
2016/01/26 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
担保书怎么写
2014/04/01 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
何玥事迹观后感
2015/06/16 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers