如何设置不规则阴影？
在CSS中设置阴影是很容易的，但是如何设置不规则的阴影呢？不规则阴影指的是，阴影的形状不再是一个矩形或圆形，而是根据元素的形状或路径来进行设置，下面来详细讲解。
1. box-shadow属性
在CSS3中，我们可以使用box-shadow属性来设置阴影。这个属性可以设置四个值，分别是水平偏移量、垂直偏移量、模糊半径和颜色。例如：
.box{
box-shadow: 5px 5px 5px #ccc;
}
上面的代码表示，阴影的水平偏移量为5px，垂直偏移量也为5px，模糊半径为5px，颜色为#ccc。
但是，这种阴影是一个矩形，不能满足我们的要求。那么怎么办呢？这时候我们可以使用SVG来进行设置。
2. SVG路径
SVG是一种用于描述矢量图形的XML标记语言，我们可以使用它来描述任意形状。下面是一个简单的例子：
<svg>
<path d="M10 10 L50 10 L50 50 L10 50 L10 10" />
</svg>
上面的代码表示，使用路径来描述一个矩形，起点为10,10，终点为10,50，然后依次连接50,50和50,10。
但是，我们不想描述一个矩形，而是想描述一个元素的形状，该怎么做呢？我们可以使用工具来生成路径，例如SVG Path Editor。
首先，在该工具中上传你需要设置阴影的元素的背景图片或填充色，然后使用画笔工具绘制出元素的形状。绘制完成后，点击Export按钮，将生成的路径复制下来。
下面是一个使用SVG路径来设置不规则阴影的例子：
.box{
position: relative;
background-image: url('https://picsum.photos/id/10/500/500');
width: 500px;
height: 500px;
z-index: 1;
}
.box:before{
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: inherit;
-webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cpath%20d%3D%22M284%20.71L431.4%20152.76%20409.09%20300.15L452.72%20439.29L335.65%20435.34L217.94%20439.29L262.27%20300.15L240.49%20152.76L387.9%20.71L317.17%20112.74L284%20.71Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cpath%20d%3D%22M284%20.71L431.4%20152.76%20409.09%20300.15L452.72%20439.29L335.65%20435.34L217.94%20439.29L262.27%20300.15L240.49%20152.76L387.9%20.71L317.17%20112.74L284%20.71Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-box-shadow: -10px 10px 5px rgba(0,0,0,0.3);
box-shadow: -10px 10px 5px rgba(0,0,0,0.3);
}
上面的代码中，使用:before伪元素来实现阴影效果。因为:before伪元素的尺寸和位置都是与元素.box相同的，所以可以将background-image设置为inherit，并且使用-webkit-mask-image和mask-image来设置SVG路径。
其中，-webkit-mask-size、mask-size、-webkit-mask-repeat、mask-repeat、-webkit-mask-position和mask-position用于控制SVG路径的大小、重复、位置等。
最后，使用-webkit-box-shadow和box-shadow来设置阴影效果，这里使用了一个左上角偏移10px、下方阴影5px，颜色为rgba(0,0,0,0.3)的阴影效果。
3. canvas
使用canvas也可以实现不规则阴影。canvas是一种通过JavaScript来绘制图形的HTML元素。
下面是一个使用canvas来设置不规则阴影的例子：
<canvas id="myCanvas" width="500" height="500"></canvas>
.box{
position: relative;
width: 500px;
height: 500px;
}
.box:before{
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-box-shadow: -10px 10px 5px rgba(0,0,0,0.3);
box-shadow: -10px 10px 5px rgba(0,0,0,0.3);
}
上面的代码中，使用canvas元素来绘制出元素.box的形状，并且使用before伪元素来实现阴影效果，阴影效果同样使用了一个左上角偏移10px、下方阴影5px，颜色为rgba(0,0,0,0.3)的阴影效果。
具体的绘制代码如下：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(284, .71);
ctx.lineTo(431.4, 152.76);
ctx.lineTo(409.09, 300.15);
ctx.lineTo(452.72, 439.29);
ctx.lineTo(335.65, 435.34);
ctx.lineTo(217.94, 439.29);
ctx.lineTo(262.27, 300.15);
ctx.lineTo(240.49, 152.76);
ctx.lineTo(387.9, .71);
ctx.lineTo(317.17, 112.74);
ctx.lineTo(284, .71);
ctx.fillStyle = "#fff";
ctx.fill();
上面的代码中，使用ctx.beginPath()方法开始一个新的路径，然后使用ctx.moveTo()方法定义路径的起点，使用ctx.lineTo()方法定义路径的终点，并连接二者。最后使用ctx.fillStyle设置填充颜色，并使用ctx.fill()方法将路径填充。
总结
通过SVG和canvas，我们可以实现不规则阴影。SVG可以通过描述路径来设置元素的形状，然后使用-webkit-mask-image和mask-image来将路径应用到元素上。canvas可以通过绘制路径来实现元素的形状，然后使用box-shadow或-webkit-box-shadow来设置阴影效果。