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'); /
基础练习：(借鉴字体形式展示)
一、常见形式：
<!--1、没有给其X轴与Y轴设置值 所在会在本身发生作用 模糊半径范围，颜色-->
text-shadow
<!--2、 X轴与Y轴改变了正值（正值 向右 向下） 所以变成了这样-->
text-shadow2
<!--3、 X轴与Y轴改变成了负值（负值 向左 向上） 所以变成了这样-->
text-shadow3
注意，正值使阴影往右/下移动，负值往左/上移动
<!--4、 IE浏览器下-->
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;
三、多阴影----加边例子（逗号隔开） 不明显：
.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的动画效果， 闪光层（字）都很简单实现。。希望对你有帮助。。
posted @ 2016-10-21 17:10 danran68 阅读(15028) 评论(0) 编辑 收藏 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册， 访问 网站首页。 【推荐】腾讯云海外1核2G云服务器低至2折，半价续费券限量免费领取！ 【推荐】阿里云双11返场来袭，热门产品低至一折等你来抢！ 【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库 【推荐】天翼云双十一翼降到底，云主机11.11元起，抽奖送大礼 【推荐】流程自动化专家UiBot，体系化教程成就高薪RPA工程师 【优惠】七牛云采购嘉年华，云存储、CDN等云产品低至1折 昵称： danran68 园龄： 3年1个月 粉丝： 24 关注： 2 +加关注 < 2019年11月 > 日 一 二 三 四 五 六 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 搜索 常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 更多链接 我的标签 js(5) css3(4) ajax(2) div+css(2) iframe单点(1) jquery(1) box-shadow阴影(1) dedecms数据库(1) text-shadow阴影(1) 表单验证(1) 更多 随笔档案 2018年7月(1) 2018年3月(1) 2018年2月(1) 2016年11月(3) 2016年10月(9) 最新评论