DIV CSS3 text-shadow字体阴影

转载 2015年11月19日 10:34:52

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范围大小颜色为黑色的阴影。

《CSS3实战》笔记--文本阴影:text-shadow

text-shadow CSS3
  • Lovejulyer
  • Lovejulyer
  • 2016年04月23日 01:00
  • 6462

CSS3之文字阴影text-shadow

最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2013年09月25日 08:45
  • 3150

CSS3的文字阴影—Text-Shadow

 text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影...
  • zhuqihe02
  • zhuqihe02
  • 2015年10月27日 19:59
  • 161

css 利用阴影给字体加粗

想要把字体加粗,但是css样式提供的最粗的font-weight:900;也达不到要求时,可以利用css的text-shadow给字体加上多个阴影从而把字体调的更粗一点,当然直接换字体也是可以的。 正...
  • dream_hai
  • dream_hai
  • 2016年08月12日 20:39
  • 954

CSS3之阴影-文字阴影text-shadow

CSS3中新增属性-阴影,可以做出很多漂亮的效果。   文字阴影text-shadow   text-shadow属性值的顺序:   text-shadow: h-...
  • qq_20545159
  • qq_20545159
  • 2015年01月31日 20:22
  • 394

css3文字阴影和盒子阴影

本来主要讲解了一下css3的一些知识。其中包括圆角,透明,文字,盒阴影等一些比较常用的内容,注意,css3只支持IE9和IE9以上的浏览器。...
  • tuzhiaichitang
  • tuzhiaichitang
  • 2017年08月03日 11:19
  • 329

CSS3的文字阴影—text-shadow

转载自:http://www.w3cplus.com/blog/52.html 前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方...
  • qq_15096707
  • qq_15096707
  • 2016年08月19日 15:15
  • 221

CSS3的文字阴影—text-shadow

CSS3的文字阴影—text-shadow 作者:大漠 日期:2011-05-10 点击:15471  前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radiu...
  • forest_fire
  • forest_fire
  • 2016年03月21日 10:50
  • 203

CSS3的文字阴影—text-shadow

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴...
  • u010227447
  • u010227447
  • 2015年06月09日 13:30
  • 364

CSS3的文字阴影—text-shadow

取值: :长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值 :指定阴影颜色,也可以是rgba透明色 :阴影的模糊值,不可以是...
  • wangxiaohui6687
  • wangxiaohui6687
  • 2014年03月05日 14:12
  • 411
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV CSS3 text-shadow字体阴影
举报原因:
原因补充:

(最多只允许输入30个字)