CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）

2016年2月26日个人博客文章--迁移到segmentfault

（1）text-shadow(文本阴影)

在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果：

没错文本的阴影的效果很强大，接下来我们就一起开始学习吧.

语法：text-shadow：none | length{2,3} color

默认值：none

取值：

none:无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

color： 设置阴影的颜色

说明:可以设定多组效果，每组参数值以逗号分隔

text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,

        水平偏移量  垂直偏移量 阴影模糊值  颜色（rgba）,
        水平偏移量  垂直偏移量 阴影模糊值  颜色（rgba）

注意：(1)使用空格分开不同属性值 (2)使用逗号分开不同阴影属性

    
Beautiful Text
    
Beautiful Text
    
Beautiful Text

在浏览器上展示效果如图所示：

（2）box-shadow（盒阴影）

因为box-shadow与text-shadow用法几乎相同只是box-shadow与文本阴影相比，盒阴影多了一个属性值——阴影外延值（第四个值）

语法：box-shadow：none | length{2,4} color默认值：none

取值：

none： 无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

第4个长度值：可选，阴影外延值。不允许负值

color： 设置阴影的颜色。

    
Beautiful Text
    
Beautiful Text
    
Beautiful Text
    
1
    
2
    
3