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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
咖啡的化学
2021/03/03 咖啡文化
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python对Excel的读取的示例代码
2020/02/14 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
销售工作岗位职责
2013/12/24 职场文书
思想专业自荐信范文
2013/12/25 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
给学校的建议书
2014/03/12 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
法人授权委托书范本
2014/09/17 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
自查自纠工作总结
2014/10/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS