今天我学到一款非常炫酷的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 必需的。垂直阴影的位置。允许负值

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。

最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。

1.远流阴影

具有模糊和遥远阴影的文本最近变得非常流行。您可以尝试在不同的距离和方向放置阴影，并为它们提供不同的颜色。

CSS

color: #cfc547;
text-shadow: 16px 22px 11px rgba(168,158,32,0.8);

2.三维文本的透视图

CSS3与您的想象力相结合，可以产生美丽而独特的海洋效果。网络排版的创意实验是网络开发人员的最爱之一，使他们的网站在视觉上令人印象深刻。通过排版，您现在可以仅使用CSS创建令人惊叹的效果。

接下来我整理的几篇文章都是关于如何使用CSS来进行文字阴影效果的设计，希望大家可以持续的关注我的文章。

1.巧妙地浮雕

创造一个你自己的影子？别担心，CSS让你满意。