当前位置: 首页 > news >正文

css给图片设置阴影效果

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

box-shadow适合给dom元素自定义样式后设置阴影效果。
div设置box-shadow设置阴影
但我们拿到一张不规则图片设置box-shadow后效果明显不符我们的预期。

图片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属性
filter可实现的效果不仅如此。我们可以再看到更多效果在runoob

filter属性其他效果
无了,have a nice day!


http://www.taodudu.cc/news/show-3890056.html

相关文章:

  • 大模型微调方法汇总
  • JWT -- 复盘
  • Zookeeper集群搭建的一些问题
  • C语言—深入理解指针(3)
  • 鸿蒙系统编译方式
  • 家居分类的添加、修改、逻辑删除和批量删除
  • css阴影效果
  • css给图片添加阴影效果方法
  • css 阴影 效果_CSS阴影效果
  • CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
  • CSS 阴影效果(盒子阴影,文字阴影)
  • vue中使用mock模拟数据
  • vue项目中使用mock模拟数据
  • 前端数据模拟的几种方法
  • LabVIEW控制Arduino实现模拟数据采集(基础篇—8)
  • 前端使用mockjs模拟接口数据
  • KEPServerEX 6 模拟数据(OPCUA 通道创建连接)
  • 微信小程序——使用mock.js模拟数据
  • SQL Father - 模拟数据生成器(后端)
  • 在微信小程序项目中使用mock模拟数据
  • Vue脚手架中使用Mock模拟数据、aixos实现ecahrts
  • 基于ONENET云平台数据的MQTT协议的使用及模拟数据和搭建。
  • 一个模拟数据的网站
  • 用faker模拟数据
  • 前端写json模拟数据
  • 关于使用rap2接口模拟数据
  • vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
  • fastmock在线模拟数据
  • vite+vue3中使用mock模拟数据
  • mock模拟数据
  • 如何使用json-server模拟数据
  • Mock模拟数据生成接口
  • dbeaver mock data generator (数据库模拟数据生成)
  • 【Vue】使用mock模拟数据
  • react使用mockjs模拟数据
  • 前端项目模拟数据两种方式