css3 text-shadow字体阴影讲解

text-shadow:为字体添加阴影, 可以通过对text-shadow属性设置相关的属性值，来实现现一些需要的字体阴影效果,减少了图片的使用。

基础说明：
    text-shadow: X轴 Y轴 Rpx color;
    属性说明（顺序依次对应）：阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色
    注（PS）：此属性使用于文字阴影，而不是对盒模型进行操作   如果设置盒模型阴影请参考知识点:box-shadow（同理）

IE下使用滤镜filter:shadow()
和box-shadow一样都是css3新增的属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用text-shadow属性时，我们需要将属性的名称前面加上前缀谷歌和苹果浏览器-webkit-text-shadow的形式。

Firefox浏览器则需要写成-moz-text-shadow的形欧朋浏览器 -o-text-shadow IE>9 -ms-text-shadow

样例：

-webkit-text-shadow:0 0 10px #c06;
   -moz-text-shadow:0 0 10px #C06;
               -o-text-shadow:0 0 10px #C06;
              text-shadow:0 0 10px #c06;
        filter: Shadow(Color='green', Direction='135', Strength='6')/*Color设置阴影颜色 Direction阴影的方向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方； Strength就是范围，类似于text-shadow中的模糊半径值*/
       /* filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true');    */

基础练习：(借鉴字体形式展示)

一、常见形式：

.demo3{ text-shadow: -5px -5px 8px #F00}
.demo4{ filter:shadow(Color=#f00000,Direction=45,Strength=8);}
</style>

<p class="pubdemo demo1">text-shadow</p>

<p class="pubdemo demo2">text-shadow2</p>

‍
<p class="pubdemo demo3">text-shadow3</p>

注意，正值使阴影往右/下移动，负值往左/上移动

‍

<p class="pubdemo demo4">text-shadow3</p>

二、四个角（）阴影：

左上角： text-shadow:-4px -4px 1px green;

左下角： text-shadow:-4px 4px 1px green;

右上角： text-shadow:4px -4px 1px green;

右下角： text-shadow:4px -4px 1px green;
</div>

三、多阴影----加边例子（逗号隔开）不明显：

.kind1{ text-shadow: 0px 0px 2px green,
                     0px 0px 3px blue,
                   0px 0px 4px red;
                   font-size:38px; color:yellow; }

四、自定义阴影-根据个人喜好所以制作

1、类似于火焰

2、3D

.threeD{ color:#fff; text-shadow: 0 0 1px #999,
                                                      1px 1px 2px #888,
                                                      2px 2px 2px #777,
                                                      3px 3px 2px #666,
                                                      4px 4px 2px #555,
                                                      5px 5px 2px #333;
   }

3、等等多种（后期在新增）......

百变不离其宗，练习就能熟悉，懂了就知道原理,随意改写，在配合css3的动画效果，闪光层（字）都很简单实现。。希望对你有帮助。。

更多专业前端知识，请上【猿2048】www.mk2048.com

css3 text-shadow字体阴影讲解相关推荐

CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
html 文字加边框阴影效果,CSS3之边框圆角、边框阴影和字体阴影
1.边框圆角在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦). 在htm ...
DIV CSS3 text-shadow字体阴影
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果. 一.CS ...
css怎么实现字体阴影,CSS3实例教程:text-shadow属性实现字体阴影分享
文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
CSS3 文字与字体相关样式
CSS3 给文字添加阴影,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中 ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）...
目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 ...

css3 text-shadow字体阴影讲解

css3 text-shadow字体阴影讲解相关推荐

最新文章

热门文章