前端|CSS盒阴影和文字阴影

问题描述

在一个网页当中，要丰富一些图形、边框或者文字等的立体效果和层次感的时候，可以用阴影的方式来呈现。而在CSS3当中，就有box-shadow,text-shadow这样两个属性来展示出阴影的效果。

解决方案

首先，需要熟悉和了解box-shadow,text-shadow这两个属性的基本语法和常见用法。这里简单的概括一下本次案例所需的几个用法，若想了解更多，请大家自行搜索查找更详尽的用法。

box-shadow语法：box-shadow:h-shadow v-shadow blur spread color inset;text-shadow的语法类似于box-shadow,只是缺少spread、insert两个描述值。

而其中需要注意的是，盒阴影可以通过添加一个insert值，使外部阴影变为内部阴影。

解决步骤：

1.盒阴影

盒阴影的呈现方式是多样的，可以是图标、图形增加外部阴影，或者呈现发光样式等，这里介绍一个十分常见的案例——遮罩层，我们可以设置合适的参数来模拟一个半透明遮罩层的样式。

由于是模拟样式，则只需要模拟一个盒子为遮罩层，设置颜色参数为0（透明效果）的阴影。

代码如下:

效果图：

2.文字阴影

文字阴影的效果可以直接使用一次这个属性来调参数呈现阴影效果，还可以用多重效果叠加来呈现。

代码如下：

效果图：

结语

CSS3中的阴影属性，可以呈现的样式和层次感是十分丰富的，比如一个发光体，模糊字体，立体图标等样式都是在网页当中十分常见的，希望通过以上的简单介绍，能够启发读者更多的思考。