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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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图片验证码制作实现分享(全)
2012/05/10 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js几个不错的函数 $$()
2006/10/09 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
对numpy中shape的深入理解
2018/06/15 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
服务中心夜班服务员岗位职责
2013/11/27 职场文书
项目经理任命书范本
2014/06/05 职场文书
推广普通话标语
2014/06/27 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS