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'); */
基础练习:(借鉴字体形式展示)
一、常见形式:
.pubdemo{ width: 320px; margin: 20px; padding:20px; font: bold 50px/100% "微软雅黑"; border:1px solid red}
.demo1{ text-shadow: 0px 0 8px #F00} .demo2{ text-shadow: 5px 5px 8px #F00}
.demo3{ text-shadow: -5px -5px 8px #F00}
.demo4{ filter:shadow(Color=#f00000,Direction=45,Strength=8);}
text-shadow
text-shadow2
text-shadow3
注意,正值使阴影往右/下移动,负值往左/上移动
text-shadow3
二、四个角()阴影:
左上角: text-shadow:-4px -4px 1px green; 左下角: text-shadow:-4px 4px 1px green; 右上角: text-shadow:4px -4px 1px green; 右下角: text-shadow:4px -4px 1px green;
*{ padding:0; margin:0}
.pubjiao{ width: 350px; margin: 20px; font-size:20px; font-weight:bold; border:1px solid red }
.pubjiao div{ float: left; width:140px; padding:10px; border:1px solid green}
三、多阴影----加边例子(逗号隔开) 不明显:
.kind1{ text-shadow: 0px 0px 2px green,
0px 0px 3px blue,
0px 0px 4px red;
font-size:38px; color:yellow; }
四、自定义阴影-根据个人喜好所以制作
1、类似于火焰
pubsty
.fire{ font-size:40px; font-weight:bold; background:#000; text-align:center; padding:24px;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
3px -10px 6px #fd3,
-3px -15px 11px #C90,
3px -25px 18px #f20;
/* 4px -35px 28px #C30;*/
}
2、3D
pubsty threeD">淡然
.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的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。