CSS3 盒阴影属性详解

Posted 2021-04-09 筑梦前端

盒阴影属性介绍

盒阴影是CSS3中专门用来修饰元素边缘的，较之CSS2.1及之前的border，outline等属性，盒阴影既不会影响网页的整体布局，也能有更多的表现形式

盒阴影概念分析

我们可以简单的整个网页内容进行一个分析，网页的布局就如同是把一个个的瓷砖贴在地板上，用户则是永远趴在天花板上看下面的瓷砖，假设当前网页上只有一个元素1，那么在用户的视角中看到的网页如下

概念图

那么我们可以换个视角，假设用户 站在地板上看，此时我们看到的就是如下这样的画面

当我们给元素1设置盒阴影的时候，默认情况下就相当于我们在这个元素之下生成了一个新的元素，而盒阴影的各项属性值就是对下面这个新的元素进行操作

盒阴影属性详解

box-shadow：xOffset yOffset burlLehgth spread color inset;

盒阴影:水平方向偏移 垂直方不偏移 阴影模糊程度 阴影缩放 阴影颜色 阴影显示方式；

1.xOffset:盒阴影在水平方向上的偏移量

在默认情况下如果我们只给元素1加一个盒阴影的颜色属性，

box-shadow：0px 0px 0 0 blue;

/*盒阴影:水平方向不偏移 垂直方向不偏移 阴影模糊程度为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影*/

此时页面显示如下：

看似没有任何效果，原因其实很简单，因为此时影子的大小与元素一致，而且没有给影子设置偏移，那么以用户的从上往下看的视角来看，元素的影子全部都被元素本身给遮挡住了

而元素的xOffset属性值的作用就是把这个影子在原来的位置上设置一个偏移，当Xoffset的值为正值时，影子向右偏移，xOffset为负值时，影子向左偏移

/*比如给元素设置100px的xOffet的值*/

box-shadow:100px 0 0 0 blue;

2.yOffset:盒阴影在水平方向上的偏移量

此值的显示效果同上，不过是偏移方向由水平改成了垂直，当yOffset的值为正值时，元素向垂直下方偏移，当yOffset的为负值时，元素向垂直上方偏移

/*比如再给元素设置100px的yOffet的值*/

box-shadow:100px 100px 0 0 blue;

实际效果

3.burlLength:盒阴影的模糊程度

此值的显示效果就好像是在原来的影子周围加上了一条有模糊渐变效果的边框，它能使影子看上去更大并且具有朦胧的效果，即便在元素没有偏移的时候，因为影子本身更大了，所以也能在元素的周围看到一层朦胧的蓝色光圈

/*给元素设置100px的burlLenth的值*/

box-shadow:0px 0px 100px 0 blue;

实际效果

4.spread:盒阴影的缩放尺寸

这个值所描述就是以元素的本身大小为影子大小的基本值，然后对影子的宽高进行设置，如果spread的值为正值，那么影子的宽高就在原来的尺寸加上此值，如果spread为负值，那么影子的宽高就是在原来的尺寸上减去此值

box-shadow:0px 0px 0px -30px blue;

5.color:盒阴影的颜色

这个值最好理解，就是影子的颜色，此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等，作用就是改变影子的颜色

6.inset:盒阴影的显示方式

默认情况下，影子在元素的下面，就如同一开始介绍的盒阴影模型一般，但是如果给盒阴影加上inset，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容

box-shadow:0px 0px 100px 0 blue inset;