前端切图css高级阴影用法drop-shadow

切图网专注于html5前端切图开发，下面给大家介绍一下前端切图css高级阴影用法drop-shadow，主要是在最近项目切图中遇到的，通常我们了解的css的阴影写法就是shadow，但是它不能解决非规则图形的阴影效果，而drop-shadow可以做到。

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。参数与box-shadow类似。但inset关键字不允许。

<div class="shadow">不规则边框</div>

.shadow{
color: #fff;
font-size: 24px;
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
/*渐变背景制作圆缺角*/
background:
radial-gradient(circle at top left, transparent 25px, red 0) top left,
radial-gradient(circle at top right, transparent 25px, red 0) top right,
radial-gradient(circle at bottom right, transparent 25px, red 0) bottom right,
radial-gradient(circle at bottom left, transparent 25px, red 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
/*不规则阴影*/
filter:drop-shadow(0 0 12px rgba(0,0,0,0.5));
}