box-shadow属性四个值_boxshadow的妙用

前端开发过程中，box-shadow经常被用来作为“加特技”的手段，使一个盒子看起来有立体感。今天我们就来盘点一下box-shadow到底有哪些基础用法和独特用法。

少啰嗦先看定义

首先来看MDN是怎么简述box-shadow的

box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

/* 投影是否向内(可选，默认向外) x轴偏移量 y轴偏移量 模糊范围(可选) 扩散范围(可选) 颜色(可选) */box-shadow: [inset]  [ = 0] [ = 0] []

这里offset-x、offset-y、blur-radius、spread-radius都是css长度值，其中blur-radius是不能为负的。 box-shadow默认值是none，非继承属性。

容易忽略或容易出错的点

1.当给出两个、三个或四个 css长度值时：

•如果只给出两个值, 那么这两个值将会被当作  来解释。•如果给出了第三个值, 那么第三个值将会被当作解释。•如果给出了第四个值, 那么第四个值将会被当作来解释。

2.内投影的位置：在边框之内 (即使是透明边框)、在背景之上、在内边距之上、在内容之下。3.外投影的位置：在背景之下、在外边距之上。4.当设定多组box-shadow值，先给定的值叠在上层，后给定的值插在下层。

用法

向外建立投影，增加悬空效果

卡片悬浮

.card {  background: #fff;  border-radius: 2px;  height: 300px;  width: 300px;  margin: 1rem;  position: relative;}.card-1 {  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  transition: all 0.3s cubic-bezier(.25,.8,.25,1);}.card-1:hover {  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

3D卡片

.card {  padding: 30px;  background: white;  border-radius: 5px;  width: 400px;  height: 200px;  margin: auto;  box-shadow: 0 0 5px rgba(0,0,0,.1);  position: relative;}.card:after {  content:" ";  position: absolute;  width: 100%;  height: 10px;  border-radius: 50%;  left:0;  bottom:-50px;  box-shadow: 0 30px 20px rgba(0,0,0,.3);    }

按钮

Click Me!.button {  display: inline-block;  color: #eff6ec;  text-decoration: none;  cursor: pointer;  border-radius: 8px;  box-shadow: 0 8px 0 #004d2f, 0 10px 15px rgba(0,0,0,.35);  transition: box-shadow 0.2s ease-in-out;}.button span {  display: inline-block;  font-size: 2em;  font-family: arial;  padding: .625em 1em;  background: #008752;  background-image: linear-gradient(#008752, #007849);  border-top: 1px solid rgba(255,255,255,.2);     border-bottom: 1px solid rgba(0,0,0,.2);  border-radius: 8px;  transition: transform 0.2s ease-in-out; }.button:active {  box-shadow: 0 8px 0 #004d2f, 0 7px 10px rgba(0,0,0,.25);}.button:active span {  transform: translateY(4px);}

光环

.pulse {  margin:100px;  display: block;  width: 22px;  height: 22px;  border-radius: 50%;  background: #cca92c;  cursor: pointer;  box-shadow: 0 0 0 rgba(204,169,44, 0.4);  animation: pulse 2s infinite;}.pulse:hover {  animation: none;}@keyframes pulse {  0% {    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);  }  70% {    box-shadow: 0 0 0 10px rgba(204,169,44, 0);  }  100% {    box-shadow: 0 0 0 0 rgba(204,169,44, 0);  }}

可以对外投影做出如下总结

1.原地投影(没有x、y的偏移)情况下，结合模糊，多数是做出光晕效果、环形效果2.偏移投影 + 模糊，多数可以构造出立体效果、悬浮效果3.偏移投影 + 不模糊(实色的投影)，多数可以构造出强力的视差效果

向内建立投影，增加塌陷效果

滚动条

#style-1::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    border-radius: 10px;    background-color: #F5F5F5;}#style-1::-webkit-scrollbar {    width: 12px;    background-color: #F5F5F5;}#style-1::-webkit-scrollbar-thumb {    border-radius: 10px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #555;}.scrollbar {    height: 300px;    width: 65px;    background: #F5F5F5;    overflow-y: scroll;}.force-overflow {    min-height: 450px;}

按钮组、工具栏

.toolbar {  display: flex;}.btn {  width: 60px;  height: 60px;  background: #fff;}.btn.inset {  border: 1px solid rgba(0,0,0,.2);  border-bottom: 1px solid rgba(0,0,0,.1);  box-shadow: inset 0 1px 6px rgba(0,0,0,.3);}

关于内外投影，诠释最好的案例就是前一阵非常火的 Neumorphism 拟态格风设计：利用光影在平面上表现空间关系。

这里有一个playground^[1]，可以通过动态调整参数的方式来感受box-shadow结合背景色创造出的魔力。

复制形状

可以设置多组值这个用法可以说是box-shadow最有趣的用法。由于投影形状是基于盒子形状的，所以换句话说，设置多组值就意味着复制形状，而且复制出来的结果自始至终只有一个盒子(元素)。

理论上设置多少组值是没有限制的，所以就出现使用box-shadow来画画的骚操作，因为本质上数字图像就是一个个带颜色的小方块。但是大量值的设置会对浏览器造成灾难式打击，所以画蒙娜丽莎这种操作就别用box-shadow了。

由于box-shadow可复制、可叠放，所以几份相同的图形也能组合出生动的图案。

云朵

  .cloud {    width: 50px;    height: 50px;    background: #fff;    border-radius: 50%;    box-shadow:      65px -15px 0 -5px #fff,      25px -25px #fff,      30px 10px #fff,      60px 15px 0 -10px #fff,      85px 5px 0 -5px #fff,      35px -35px #c8c8c8,      66px -27px 0 -5px #c8c8c8,      91px -10px 0 -8px #c8c8c8;  }

彩虹

  .rainbow {    transform: translate(-50%, -50%) rotate(45deg);    width: 70px;    height: 70px;    border-radius: 100px 0 0 0;    box-shadow:       -2px -2px 0 1px #F44336,      -4px -4px 0 3px#FF9800,      -6px -6px 0 5px#FFEB3B,      -8px -8px 0 7px#8BC34A,      -10px -10px 0 9px#00BCD4,      -12px -12px 0 11px#2196F3,      -14px -14px 0 13px rgb(126, 124, 126);  }

以后再有一些由基础图形组成的图案，在决定使用svg或其他资源之前，先考虑是否可以用box-shadow实现。

总结

box-shadow用法的核心思路基本都可以划分到以上三类。虽然创作思路很简单，但真正需要多写多感受的是box-shadow值的设置，就好比绘画过程中对色彩配比、笔墨轻重的掌握是需要日积月累的经验才能摸清的。

References

[1] playground: https://neumorphism.io/