CSS3实战1-文本属性text-shadow的用法

text-shadow 定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了，但是在css3中又重新定义了，并且增加了不透明度的效果。

基本语法

text-shadow：none |  [ ,  ]*
 = {2,3} && ?

• 默认值：无

• 适用于：所有元素

• 动画性：是，除了内、外阴影切换时

• 计算值：指定值

取值：

• none： 无阴影

• ①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

• ②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

• ③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

• ④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值

• ： 设置对象的阴影的颜色。

• inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

Demo和Demo源码

Demo地址：http://weber.pub/demo/160925/text-shadow.html

Demo源码：http://pan.baidu.com/s/1sl0A5pr 密码：a0qh

解释

先上代码

weber.pub
weber.pub

从上面的例子中可以看出 text-shadow 属性的第一个值表示水平位移，第二个表示垂直位移，第三个表示模糊半径（可选），第四个表示阴影颜色（可选）

实例

• 1、复杂文本特效

实现一个文本的多重阴影效果

weber.pub

效果图如下

• 2、静态火焰效果

根据不同的偏离值模糊程度，再加上我们设定合适的颜色值，就可以利用 text-shadow 来做出类似火焰的效果。

weber.pub

• 3、会动的火焰效果

根据css3的动画然后让text-shadow属性变化来实现的效果（css样式只展示在 chrome 浏览器的，兼容其他浏览器的css样式，可下载源码）

weber.pub

• 5、内凹立体文本效果

和上面的案例原理相同

weber.pub

• 6、文本描边效果

分别对文本的4个边添加1像素的实体阴影

weber.pub

• 7、文本外发光效果

weber.pub

by web开发者 from http://weber.pub/

本文地址： http://weber.pub/css3实战1-文本属性text-shadow的用法/220.html