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

END

实习主编   |   王楠岚

责       编   |   wrape

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！