长方体阴影很无聊。你听到我说的了。它们一次只能使用一种颜色，并且动画或过渡很慢。你知道什么才是整洁吗？制作一个使用元素背景颜色的投影。因此，如果元素的左上角是红色的，则阴影的左上角也是红色的。如果右下角为蓝色，则阴影的左下角将为蓝色。这不是很好吗？可惜在css中没有办法做到这一点……哦，等等，有。让我们开始吧。

方法

实际上，我们所要做的就是在父元素后面直接创建一个伪元素，并让它继承相关的属性，如Backround和edge-Radius。然后我们添加一个cssblur()滤镜。这将创建元素背景的第二个副本，并将其模糊到元素后面。轻而易举。通过继承背景和相关属性，我们不必重复指定它们。

更好的是，如果你想以某种方式动画/平滑/挤压阴影，你可以在伪元素上使用CSS变换和不透明度的全部功能！

有什么问题吗？阴影不会在不支持css blur filter. 的浏览器]中显示

代码

 1/* The element that will have the blurred shadow. */
 2.fancy-box {
 3  /* We need to set the position value to something other than `static`
 4   * so that position: absolute for the pseudo-element will be relative
 5   * to this element. */
 6  position: relative;
 7
 8  /* A nice Alligator.io-themed linear gradient. */
 9  /* This technique works with any and every background type. */
10  background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104));
11
12  /* Whatever else you want in here. */
13}
14
15/* The shadow pseudo-element. */
16.fancy-box::before {
17  content: ' ';
18  /* Position it behind the parent. */
19  z-index: -1;
20  position: absolute;
21  top: 0;
22  right: 0;
23  bottom: 0;
24  left: 0;
25
26  /* Inherit the background and border radius of the parent. */
27  background: inherit;
28  border-radius: inherit;
29
30  /* Blur it for maximum shadowy-ness. */
31  filter: blur(15px);
32
33  /* Hide the shadow until the element is hovered over. */
34  opacity: 0;
35  transition: opacity 300ms;
36}
37
38/* Show the shadow on hover. */
39.fancy-box:hover::before {
40  opacity: 1;
41}

结果

请注意它是如何处理透明图像的！你终于可以制作出形状的阴影了！🎉

这里有一个你可以玩耍的编剧。

性能如何？只要你不频繁更换背景或调整模糊半径，它的速度就会非常快！总的来说，这种技术的性能特点与我们之前向你展示的[高效盒状阴影过渡]（/css/transition-box-shadows)方法不相上下。

CSS 技巧：多色和剪切阴影

方法

代码

结果