css的好看的阴影效果（前端切图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)); }