前端|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（透明效果）的阴影。

代码如下:

div{

   width:200px;

   line-height:200px;

   margin:50px;

   box-shadow: 0 0 0 1920px rgba(0, 0, 0, .5);  //宽度设置为页面宽度

}

效果图：

2.文字阴影

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

代码如下：

div{

   width:200px;

   font-size:50px;

  color:hsl(0,  0%, 60%);

   text-shadow:

     1px 1px 0 hsl(0, 0%, 65%),

     2px 2px 0 hsl(0, 0%, 70%),

     3px 3px 0 hsl(0, 0%, 75%),

     4px 4px 0 hsl(0, 0%, 80%),

     5px 5px 0 hsl(0, 0%, 85%);

}

效果图：

结语

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