问题：给不规则的镂空图片设置阴影

box-shadow适合给dom元素自定义样式后设置阴影效果。

但我们拿到一张不规则图片设置box-shadow后效果明显不符我们的预期。

解决方法：css中的filter

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

mdn链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

我们给img设置css属性

filter: drop-shadow(-4rem 0 4rem #000);

可以得到我们想要实现的效果。

注意： Internet Explorer 不支持 filter 属性。

filter可实现的效果不仅如此。我们可以再看到更多效果在runoob

无了，have a nice day！

css给图片设置阴影效果相关推荐

css给图片添加阴影效果方法
css给图片添加阴影效果方法 box-shadow属性代码 box-shadow属性 css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如 ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
CSS 背景图片设置居中
有时设置背景图片,要满足大屏显示器显示完成,小屏显示中间的部分,隐藏边上的装饰: <div style="background: url(wy-user.png) <strong ...
CSS把图片设置为背景
前言先列出几种常用的搭配,方便 CV,想了解具体的可以看后面详细介绍第 1 组:刚好填充整个背景区域,不重复 background-image: url("~@/路径"); b ...
通过css让图片设置成黑白色
.gray{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-fi ...
border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
[css] 给一个图片设置透明有哪些方式呢？
[css] 给一个图片设置透明有哪些方式呢? 1.opacity : 0 -> 子元素会继承 2.外层用盒子包裹,设置其rgba(255,255,255,0) 个人简介我是歌谣,欢迎和大家一起 ...
电脑桌面怎么设置html背景图,css中如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
css如何把图片设置为黑白_使用CSS将图像转换为黑白图像
css如何把图片设置为黑白 Desaturating a color image couldn't be simpler with CSS. The filter is typically appli ...

css给图片设置阴影效果

问题：给不规则的镂空图片设置阴影

解决方法：css中的filter

css给图片设置阴影效果相关推荐

最新文章

热门文章