通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。

box-shadow

CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。

语法

  1. /* offset-x | offset-y | color */
  2. box-shadow: 60px -16px teal;
  3. 阴影的水平位置 垂直位置 颜色
  4. 上面表示为 阴影位置相对元素位置水平（向右）偏移60px，垂直（向上）偏移-16px
  6. /* offset-x | offset-y | blur-radius 模糊| color */
  7. box-shadow: 10px 5px 5px black;
  8.  模糊值越大，阴影就越大越淡
  10. /* offset-x | offset-y | blur-radius | spread-radius 扩大 | color */
  11. box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  12. 扩大的默认值为0，不扩大，与元素大小相同，取正值时，阴影扩大；取负值时，阴影收缩。
  15. /* inset | offset-x | offset-y | color */
  16. box-shadow: inset 5em 1em gold;
  17. inset设置内阴影，原本默认为外阴影
  19. /* Any number of shadows, separated by commas */
  20. box-shadow: 3px 3px red, -1em 0 0.4em olive;
  22. /* Global keywords */
  23. box-shadow: inherit;
  24. box-shadow: initial;
  25. box-shadow: unset;

示例

shadow-blur 动态阴影

利用 filter: blur 模糊滤镜，我们可以生成与背景图片颜色相仿的阴影效果；

其简单的原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。重要的就是filter: blur(10px) brightness(80%) opacity(.8); 。

  1. .shadow-blur {
  2.     position: relative;
  3.   background: url($img) no-repeat center center;
  4. }
  6. .shadow-blur::before {
  7.     content: "";
  8.     display: block;
  9.     background: inherit;
  11.     filter: blur(10rpx);
  12.   opacity: 0.4;
  14.     position: absolute;
  15.     width: 100%;
  16.     height: 100%;
  17.     top: 10rpx;
  18.     left: 10rpx;
  19.     z-index: -1;
  20.     transform-origin: 0 0;
  21.     border-radius: inherit;
  22.     transform: scale(1, 1);
  23. }
  25. /* 或者 */
  26. .shadow-blur::after {
  27.   content: "";
  28.   position: absolute;
  29.   top: 10%;
  30.   width: 100%;
  31.   height: 100%;
  32.   background: inherit;
  33.   background-size: 100% 100%;
  34.   filter: blur(10px) brightness(80%) opacity(.8);
  35.   z-index: -1;
  36. }

image.png

  1. <div class="dynamic-shadow-parent">
  2.   <div class="dynamic-shadow"></div>
  3. </div>
  5. .dynamic-shadow-parent {
  6.   position: relative;
  7.   z-index: 1;
  8. }
  9. .dynamic-shadow {
  10.   position: relative;
  11.   width: 10rem;
  12.   height: 10rem;
  13.   background: linear-gradient(75deg, #6d78ff, #00ffb8);
  14. }
  15. .dynamic-shadow::after {
  16.   content: '';
  17.   width: 100%;
  18.   height: 100%;
  19.   position: absolute;
  20.   background: inherit;
  21.   top: 0.5rem;
  22.   filter: blur(0.4rem);
  23.   opacity: 0.7;
  24.   z-index: -1;
  25. }

image.png

box-shadow盒阴影图形生成技术