使用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样式linear-gradient的使用实例
Jan 16 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 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
smarty实例教程
2006/11/19 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python实现邮件发送功能
2019/08/10 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
django中media媒体路径设置的步骤
2019/11/15 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
如何获得EntityManager
2014/02/09 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
诚信考试标语
2014/06/24 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
银行稽核岗位职责
2015/04/13 职场文书
成绩单家长意见
2015/06/03 职场文书
同学会感言
2015/07/30 职场文书