在昨天我们知道了什么是rgba后，今天我们就来继续学习css自带的文字阴影样式来制作字体模糊效果。在此之前我们先学习下文字阴影样式text-shadow.

学习text-shadow属性的使用

text-shadow属性介绍

祝您2019猪事顺利，心想事成。

前言

前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。

没有看过之前文章的小伙伴请点击：

实例

基本文字阴影（text-shadow）：

h1

{

text-shadow: 2px 2px #ff0000;

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

今天我学到一款非常炫酷的HTML5/CSS3阴影文字特效，一共有9组不同的样式，这9组文字中，除了有不同的字体外，每一组的文字阴影和文字放光颜色都不同，看起来都十分漂亮，遗憾的是，中文并没有那么漂亮的字体了。在页面的字体设计中，可以拿出来玩玩，绝对很炫的。

效果图，有点偏差

CSS样式：

大家可以在下面分享自己学习的经验，谢谢！！！

CSS3技术添加了许多原本利用Photoshop中处理才能实现的效果。例如文本阴影、发光效果、凸起和凹陷等。今天我们就一起学习一个新的CSS3属性，这个属性的本质是为文本添加阴影，但是通过对该属性原理的理解并加以调整，可以对文本实现更多的特效。

承接文章：利用CSS3

在开发中经常会使用阴影增加现实感，css3实现的模糊阴影主要分为盒阴影box-shadow和文本阴影text-shadow。今天就带大家玩转css的阴影，后面的拓展也只是抛砖引玉，希望给各位带来启迪。

一、box-shadow

该属性用来给容器添加一个或多个阴影效果。这个属性非常有用，可以结合伪类和动画实现设计的层次感和高亮度。基本语法是：

box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

祝您2019猪事顺利，心想事成。

前言

前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。

没有看过之前文章的小伙伴请点击：

在静态页面中，相信大家见过不少的具有阴影的文字或者容器。本来普普通通的一行文字，平淡出奇的一个div容器，但因为加了一个阴影，一切就显得不一样了……

接下来，我们就来介绍一下css中的阴影：

一、盒子阴影（box-shadow）

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值