CSS3 text-shadow实现文字阴影效果


Posted in HTML / CSS onFebruary 24, 2016

CSS3设置文字阴影效果,对文字字体设置阴影效果,采用text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。

CSS3单词与语法

CSS3单词: text-shadow

语法结构:text-shadow: 5px 2px 6px black;

5px 代表着:阴影距离文字左5px显示
2px 代表着:阴影距离文字上2px显示
6px 代表着:阴影大小范围
black 代表着:阴影颜色为黑色

例子:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.     .All-orange {   
  8.         font: normal 14px 微软雅黑,sans-serif;   
  9.         max-width: auto;   
  10.         max-height: auto;   
  11.         background-color: #f8f8f8;   
  12.         padding: 30px 30px 20px 30px;   
  13.         color: #666;   
  14.         border-radius: 5px   
  15.     }   
  16.     .All-orange h1 {   
  17.         font: normal 32px 微软雅黑,sans-serif;   
  18.         padding: 20px 0 20px 40px;   
  19.         display: block;   
  20.         margin: -30px -30px 10px -30px;   
  21.         color: #FFF;   
  22.         background-color: #0CF;   
  23.         border-radius: 5px;   
  24.         text-shadow:5px 2px 6px #000;   
  25.         box-shadow: 5px 2px 6px #000;   
  26.     }   
  27.     .All-orange img {   
  28.         float: left   
  29.     }   
  30.     .All-orange h1 img{   
  31.         margin-top: -15px;   
  32.     }   
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <div class="All-orange" id="all">  
  37.     <h1><img src="../img/launcher_icon_.png" />  
  38.         悲伤黑白棋   
  39.     </h1>  
  40.    </div>  
  41. </body>  
  42. </html>  

效果图:

CSS3 text-shadow实现文字阴影效果

浏览器兼容

此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

CSS3 text-shadow实现文字阴影效果

以上就是利用CSS3 text-shadow实现的文字阴影效果,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
You might like
深入理解PHP中的global
2014/08/19 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python写的一个简单监控系统
2015/06/19 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
高职教师岗位职责
2013/12/24 职场文书
领导干部考察材料
2014/02/08 职场文书
应急管理培训方案
2014/06/12 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015年班组工作总结
2015/04/20 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
JavaScript实现简单拖拽效果
2021/09/15 Javascript