切图网专注于html5前端切图开发,下面给大家介绍一下前端切图css高级阴影用法drop-shadow,主要是在最近项目切图中遇到的,通常我们了解的css的阴影写法就是shadow,但是它不能解决非规则图形的阴影效果,而drop-shadow可以做到。
给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。参数与box-shadow类似。但inset关键字不允许。
不规则边框
.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));}
留言与评论(共有 0 条评论) “” |