大家好，今天来为大家解答box-shadow这个问题的一些问题点，包括box-shadow属性详解也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
在网页设计中，box-shadow是一个非常实用的CSS属性，它可以帮助我们为元素添加阴影效果，让页面看起来更加立体、生动。今天，我们就来聊聊box-shadow的强大应用与技巧。
一、什么是box-shadow？
box-shadow是CSS3中新增的一个属性，用于给元素添加阴影效果。它可以让页面元素看起来更加立体，增加视觉层次感。box-shadow的语法如下：
“`css
box-shadow: h-shadow v-shadow blur spread color inset;
“`
- h-shadow：水平阴影的位置。正值向右移动，负值向左移动。
- v-shadow：垂直阴影的位置。正值向下移动，负值向上移动。
- blur：阴影的模糊距离。值越大，阴影越模糊。
- spread：阴影的扩散距离。正值扩散，负值收缩。
- color：阴影的颜色。
- inset：将外部阴影（默认值）改为内部阴影。
二、box-shadow的强大应用
box-shadow的应用非常广泛，以下是一些常见的应用场景：
| 应用场景 | 例子 |
| :–: | :–: |
| 水平菜单按钮 |
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
4、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur值越大，阴影则更不锋利而更朦胧/模糊。负值是不合法的，会被修正成 0。
5、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
6、color
color部分的值正如所预料的，是指阴影的颜色，可以是任意的颜色单元。
7、position
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
box-shadow的作用：
box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。通过对box-shadow使用的理解，想要一个div的四周都有阴影的话，可通过box-shadow的四周阴影叠加来实现。
box-Shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4个长度值、一个可选的颜色值和一个可选的 inset关键字来规定。省略长度的值是 0。
box-shadow属性四个值是什么
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
3、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur值越大，阴影则更不锋利而更朦胧/模糊。负值是不合法的，会被修正成 0。
4、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
设置水平垂直偏移得到阴影效果：
outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。
inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。
如何实现平滑的“box-shadow”动画效果
这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制，应该创建一个伪元素并对其 opacity元素进行动画处理，使其以每秒60帧的动画模仿运动物体相同的效果。
实例
认真观察这个实例，比较我们在其中使用的不同技巧。你是不是会说两者效果看起来一样。唯一不同的是我们如何应用阴影并对其进行动画处理。在左边实例中，我们鼠标 hover(悬浮)时，对 box-shadow应用了动画效果。而在右边的实例中，我们用::after添加了一个伪元素并对其设置了阴影，并对该元素的 opacity元素进行了动画处理。
如果你使用开发工具尝试了其中之一，您应该会看到类似这样的东西(绿色条表示已经绘制，其越少越好):
当你悬停在左边的卡片(在 box-shadow上应用动画)与悬浮在右边的卡片(对其伪元素的 opacity应用动画)进行相比时，你会很明显的发现有更多的重新绘制。
为什么我们会看到这种效果？有很少的 CSS属性，即 opacity和 transform，进行动画处理时，不会不断触发重绘每一帧。我们最好坚持只在动画中更改这两个属性实现最小化重绘(您的浏览器不得不做的工作)。
抛却其它的布局样式，这就是这两种技术之间的关键区别︰
/* The slow way*/
.make-it-slow{
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out:
}
/*鼠标悬停实现更大阴影的过渡*/
.make-it-slow:hover{
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* The fast way*/
.make-it-fast{
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/*设置更大的阴影并将之隐藏*/
.make-it-fast::after{
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out:
}
/*鼠标悬停时实现更大阴影的过渡显示*/
.make-it-fast:hover::after{
opacity: 1;
}
详细分解
基于上面所述，让我们看看如何创建上面示例中演示的 3D卡片效果。第一步是将阴影转移到到一个伪元素，就像我们上面所做的一样。让我们也给所有创建的卡片添加布局代码:
/*创建一个简单白色盒子,并添加阴影*/
.box{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 5px;
background-color:#fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}
/*创建隐藏的伪元素*/
/*最终样式包含阴影*/
.box::after{
content:'';
position: absolute;
z-index:-1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
注意,我们要.box和.box::after添加了 transition元素，因为我们要对这两个元素进行动画处理:.box上应用 transform元素,.box::after上应用 opacity元素.
这些样式给我们展示了一个具有微妙 box-shadow样式的白色盒子。这里.box::after上的阴影已经完全被隐藏，不能与盒子效果相互影响。
若要创建演示中相同的效果，现在我们需要做的是:当鼠标悬停在.box时，产生放大效果，并且在伪元素和阴影上实现淡化:
/*放大盒子*/
.box:hover{
transform: scale(1.2, 1.2);
}
/*伪元素更大阴影的淡化*/
.box:hover::after{
opacity: 1;
}
总之，这就是所有的CSS样式，包括不同浏览器的兼容样式和一些额外的自定义缓动效果:
.box{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background-color:#fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box::after{
content:””;
border-radius: 5px;
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box:hover{
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.box:hover::after{
opacity: 1;
}
显然这里与只使用 box-shadow相比应用了大量的 CSS来实现相同的动画效果，只是改进性能。这又何必呢？
即使你的桌面处理 box-shadow动画时没有任何问题，你的手机可能也不会出现问题。但是当你处理更为复杂的布局时，你就会发现你的桌面可能开始表现出症状。
好了，文章到此结束，希望可以帮助到大家。
