css3文字阴影属性text-shadow
前言
前面我们曾经学习了盒子阴影属性box-shadow,这篇文章说的文字阴影属性text-shadow。小文章一篇,希望大家通过这篇文章再来回顾一下box-shadow盒子阴影属性。
text-shadow属性值
对于w3c对于text-shadow的规范如下:
属性名: | box-shadow |
---|---|
属性值: | none | [<shadow>,]* <shadow> |
初始值: | none |
应用于: | 所有元素 |
继承性: | 是 |
百分比: | N/A |
计算值: |
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
原创文章,转载请注明来自:◎小黑路人xiaoho.com
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:suchanghai 来源: 小黑路人-苏昌海-xiaoho.com-分享html/css/web前端知识
- 标签: text-shadow 阴影
- 发布时间:2015-01-14 13:34:33
- [70] Twitter/微博客的学习摘要
- [65] IOS安全–浅谈关于IOS加固的几种方法
- [65] 如何拿下简短的域名
- [65] find命令的一点注意事项
- [63] Go Reflect 性能
- [63] android 开发入门
- [61] 流程管理与用户研究
- [59] 读书笔记-壹百度:百度十年千倍的29条法则
- [59] Oracle MTS模式下 进程地址与会话信
- [59] 图书馆的世界纪录