css3文字阴影属性text-shadow

css3文字阴影属性text-shadow

   前面我们曾经学习了盒子阴影属性box-shadow，这篇文章说的文字阴影属性text-shadow。小文章一篇，希望大家通过这篇文章再来回顾一下box-shadow盒子阴影属性。

text-shadow属性值

   对于w3c对于text-shadow的规范如下：

   1、none，没有指定任何的值，文本形式按照用户代理或者csser设置的文本形式展示

   2、[<shadow>,]* ，每一个shadow(阴影值)之间用逗号(,)隔开，*表示可以重复无限制。其中shadow的值有如下属性值:

shadow的值有  [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

   color值可选，假如没有指定，那么跟文本颜色一致，假如文本颜色也没有指定，那么根据用户代理指定。

   offset-x，offset-y，前一个值为阴影水平位移，后一个值为垂直位移，这点跟box-shadow一致，并且这两个值必须有，缺一不可。允许负值，offset-x负值向左偏移，offset-y向上偏移。

   假如是多个shadow，那么就存在重叠现象，既然有重叠那就应该有层级关系，一般情况来说css中的层级关系是后来的值会覆盖前面的值，比如这么写css类

.f12{font-size:12px;}

   .f12{font-size:14px;} //后者覆盖前者样式，所以文本字体会显示14px

   但是对于css属性里面的值都是按照先来后到原则，并不是谁牛逼谁就在前面。这让我想起来了初中的时候，不管是拍照还是排队都是按照矮个子的在前面高个子在后面，就算是矮个子挡住了高个的下半身，但是起码还可以看见一个头嘛！

   代码如下：

.f12{font-size:12px;}
.f12{font-size:14px;}
.text-shadow{
	text-shadow:0 0 #000,0 5px #f00,10px 0 #0ff; 
	background-color:#18b4ed;
	color:#fff;
	font-size:50px;
}
.box-shadow{
	box-shadow:0 0 5px #000,0 10px #f00,10px 0 #0ff;
	width:100px;
	padding:10px;
}

<p class="f12">这是14px的文字大小<span style="font-size:12px;">这是12像素文本</span></p>
<p class="text-shadow">朋友推荐我听一首DJ舞曲，名字有点怪怪的，歌曲叫《小红帽》，我也是醉了</p>

   <p class="box-shadow">假如你有幸也听见这首歌，那么把你的想法在评论中写出，其实应该打码才对。</p>

   不妨点击右侧 demo：css属性值层级与css类层级关系

   或者拿出手机扫下面的二维码

   效果图如下：

   我们可以看见text-shadow中，第一个shadow的颜色为红色，第二个shadow的颜色为青色，黑色箭头处就是他们的交叉处，可以看见红色层级要比青色层级高。假如有N个shadow，那就以此类推，后出现的shadow中的值也是从原点偏移，所以可以利用这个阴影效果创造很多的伪3D，凹面体，凸面体等，这些文字的构成都是基于利用这水平位移和垂直位移，指定不同的颜色加以辨别得出。具体的各种立体图形效果，可以参考大漠网站：css3文字阴影

   blur-radius，模糊半径，可选值。假如没有指定，那么该值的初始值为0，数值越大的值，那么它的模糊半径就越大。不允许负值。

   题外话：，相对 box-shadow，text-shadow并没有inset这个值，这点要区分开来。

   他们的相同之处：不影响布局，不会触发滚动条，当然，也不会增加滚动区域的大小，盒子本身100*100，加了text-shadow或者box-shadow之后，盒子还是100*100。但是text-shadow在半透明文本的时候，不会像 box-shadow裁剪shadow的形状。

   对于text-shadow的应用，个人觉得可以用在有背景色的布局上，比如说一些暗色调的背景布局让会字体有一种凹凸效果

xiaoho

   xiaoho

   之前好像看见谁的博客里面就是用到了超链接的凹凸效果，具体是谁忘记了，链接link、visited向外拓展模糊，active是水平位移和垂直位移都减小，利用用户代理的模拟input表单中的按钮点击效果，或者你可以点击→ ：text-shadow模拟input

   效果如下：

参考资料：

     https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

     http://dev.w3.org/csswg/css-text-decor-3/#text-shadow-property

本文地址：http://xiaoho.com/?p=875

   原创文章，转载请注明来自：◎小黑路人xiaoho.com

建议继续学习：