欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

DIV CSS3 text-shadow字体阴影

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

一、CSS3单词与语法   -   TOP

1、CSS3单词:
text-shadow

2、语法结构

  1. div{text-shadow:5px 2px 6px #000;} 

设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果,同时阴影大小范围为6px,阴影颜色为黑色(#000)。

文字阴影语法结构图
文字阴影语法结构分析图

3、说明
文字显示阴影效果共4个值,第一个代表距离左多少距离开始显示阴影效果,第二个值代表距离上多少距离开始显示阴影效果,第三个值代表阴影范围大小,第四个值为阴影效果颜色。

二、案例   -   TOP

1、案例HTML代码

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>字体阴影 在线演示 DIVCSS5</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.divcss5.com --> 
  8. </head> 
  9. <body> 
  10. <div>我阴影文字</div> 
  11. <div class="txt">文字阴影测试内容1</div> 
  12. <div class="txt2">文字阴影测试内容2</div> 
  13. </body> 
  14. </html> 

2、对应CSS代码:

  1. .txt {text-shadow:5px 1px 6px #F93 }  
  2. .txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC} 

3、案例效果截图

谷歌浏览器效果截图
谷歌浏览器文字阴影实例效果截图

4、说明
此案例设置对两个盒子分别设置了阴影案例,前者阴影范围设置比较大,颜色为桔黄色;后者设置1px范围大小颜色为黑色的阴影。

5、在线演示:

查看案例(在IE9及以上浏览器看效果)

查看案例

6、打包下载:

三、总结说明   -   TOP

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

CSS3兼容截图
CSS3兼容截图

2、对应CSS3手册
http://www.divcss5.com/css3/text-shadow.html

3、因为兼容性,CSS3属性在IE9以下IE浏览器不支持不兼容,所以设置后只有IE9以上浏览器兼容,所以使用时候慎重选择。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c734.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2014-07-03 15:35 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。