2022年8月16日

前端切图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));
}

 

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》