CSS3 text shadow字体阴影效果


Posted in HTML / CSS onJanuary 08, 2016

最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。
一、text-shadow语法
1、语法:
对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}
注:text-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。
2、取值:
box-shadow属性最多可以有6个参数设置,他们分别取值:
(1) 阴影水平偏移量 :是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
(2) 阴影的垂直偏移量 :是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;
(3) 阴影模糊半径 :此参数是可选,但其值只能是为正值。如果值越大,阴影越模糊,反之阴影越清晰。如果其值为0时,表示阴影不具有模糊效果。
(4) 阴影颜色 :此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
在CSS3没有问世之前,处理文字阴影的方法,基本上都是图片。直到CSS3的出现,让我们制作文字阴影的方法又有了进一步的提高。其实文字阴影——text-shadow在CSS2里面出现过,但是在CSS2.0又没无情的抛弃了,现在CSS3中又让使用了,这说明文字阴影——text-shadow还是值得咱们重视的。所以作为一名合格的前端人员,掌握文字阴影那必须是当务之急了。
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。
CSS3单词与语法
CSS3单词: text-shadow
语法结构:text-shadow: 5px 2px 6px black;
5px 代表着:阴影距离文字左5px显示
2px 代表着:阴影距离文字上2px显示
6px 代表着:阴影大小范围
black 代表着:阴影颜色为黑色
例子:

CSS 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. fontnormal 14px 微软雅黑,sans-serif;    
  9. max-widthauto;    
  10. max-heightauto;    
  11. background-color#f8f8f8;    
  12. padding30px 30px 20px 30px;    
  13. color#666;    
  14. border-radius: 5px    
  15. }    
  16. .All-orange h1 {    
  17. fontnormal 32px 微软雅黑,sans-serif;    
  18. padding20px 0 20px 40px;    
  19. displayblock;    
  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. floatleft    
  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字体阴影效果

HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 #HTML / CSS
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
php给数组赋值的实例方法
2019/09/26 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
ECMAScript6--解构
2017/03/30 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
学历公证委托书
2014/04/09 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python