.png图片 阴影效果（fliter:drop-shadow属性）案例

最新推荐文章于 2024-05-22 09:21:14 发布
最新推荐文章于 2024-05-22 09:21:14 发布
阅读量1.9k 收藏
点赞数
分类专栏： img图片处理
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/101021048
版权

png图片 阴影效果（fliter:drop-shadow属性）案例

效果截图 · 示下：

在这里插入图片描述

重要代码如下：

<img src="qiye.png"  class="ss"/>

.ss:hover{ 
	fliter:drop-shadow(0 0 5px #cccccc);
	-webkit-filter:drop-shadow(0 0 5px #cccccc);
}

附：全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>png图片 阴影效果（fliter:drop-shadow属性）案例</title>
		<style type="text/css">
			.ss:hover{ 
				fliter:drop-shadow(0 0 5px #cccccc);
				-webkit-filter:drop-shadow(0 0 5px #cccccc);
			}
			p{font-size: 40px;}
			.p1:hover{ text-shadow:5px 1px 6px #F93;}
			.p2:hover{box-shadow: 0 0 30px rgba(0,0,0,.5);}
		</style>
	</head>
	<body>
		<img src="qiye.png"  class="ss"/>
		<img src="qiye.png" style=""/>
		<p class="p1">我是企业</p>
		<p class="p2">我是企业</p>
		
		<hr/>

		<img src="qiye.png" style="filter: drop-shadow(0 0 2px #2b002b) drop-shadow(0 0 15px #c0c) drop-shadow(0 0 5px #f0f);-webkit-filter: drop-shadow(0 0 2px #2b002b) drop-shadow(0 0 15px #c0c) drop-shadow(0 0 5px #f0f);"/>
		<!--
			fliter:drop-shadow(0 0 10px rgba(0,0,0,0.5))
			/*或者*/
			fliter:drop-shadow(0 0 10px #cccccc)
		-->


	</body>
</html>

以上就是关于“ png图片 阴影效果（fliter:drop-shadow属性）案例 ” 的全部内容。

草巾冒小子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PNG格式小图标的CSS任意颜色赋色技术
05-31 751
原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。如果对drop-shadow不是很了解，建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文！对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？然后，...
Css 给PNG图像设置阴影
票票的博客
01-04 2427
.div { filter: drop-shadow(0px 2px 20px #ecf6ff); }
box-shadow大全
最新发布
qq_43218075的博客
05-22 654
各种阴影介绍及属性说明
png 网页背景阴影解决方案
xwygn的专栏
12-10 1726
本帖最后由 lanyou2009 于 2009-9-2 13:24 编辑 在做自己的SS站LOGO时，我用的是PNG图片，PS时做的是透明背景，上传到网站后在本机测试也是透明（如图一），不过之后在很多别人的电脑上看时图片出现了水渗般的背景色（如图二），问了很多朋友，以为与电脑分辨率有关，不过调试后不行，自己上网找了很久，发现原来是浏览器问题。     发现遇到同样问题的不仅是我，所以就本人
给不规则png图片内容添加阴影
weixin_44801790的博客
12-01 614
一般加阴影使用的是`box-shadow`属性，但是它只能给盒子边框添加阴影，不能更具图片形状来添加阴影，这时候需要使用`filter:drop-shadow()`过滤镜功能，可以在实现图像的内容上创建阴影。
CSS滤镜：drop-shadow和裁剪元素clip-path
farmerXU的博客
08-28 1230
drop-shadow img { filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); } box-shadow为我们提供了一个矩形阴影，即使元素没有背景，而drop-shadow则为图像的非透明部分创建阴影。 clip-path clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 clip-path: polygon(0 0, 50% 0, 100% 50%, 50%...
软考高级：10-架构-1.png
11-15
软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-架构-1.png软考高级：10-...
软考高级：5-开发模型.png
11-17
软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级：5-开发模型.png软考高级...
软考高级：9-项目管理.png
11-17
软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级：9-项目管理.png软考高级...
软考高级：16-信息安全技术 基础知识.png
11-17
软考高级：16-信息安全技术 基础知识.png软考高级：16-信息安全技术 基础知识.png软考高级：16-信息安全技术 基础知识.png软考高级：16-信息安全技术 基础知识.png软考高级：16-信息安全技术 基础知识.png软考高级：...
软考高级：2-系统工程与信息系统基础.png
11-15
软考高级：2-系统工程与信息系统基础.png软考高级：2-系统工程与信息系统基础.png软考高级：2-系统工程与信息系统基础.png软考高级：2-系统工程与信息系统基础.png软考高级：2-系统工程与信息系统基础.png软考高级：...
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
重大学习css3 的filter之drop-shadow牛逼
MKliudan的专栏
06-19 2015
这个属性只能说牛逼，很牛逼 filter：drop-shadow（x,y,blur,color） -webkit-filter：drop-shadow（x,y,blur,color） 1. 可以给png图片加阴影，box-shadow做不到 看代码 效果如图 对于切图并加阴影的png图，方法十分适合 2.drop-shadow阴影不叠加 （1）.box-
Qt C++自定义窗体，实现自定义标题栏、阴影、全局背景、拖拽、缩放、最大化等功能，附下载链接
qq_32513033的博客
12-27 4154
功能：自定义标题栏、阴影、透明、边框、全局背景、拖拽、缩放、最大化、最小化、还原、关闭、记住窗体状态。 网上已经有很多类似的教程，但都有一些不足。本篇文章几乎完全实现了和window默认窗体的所有功能（缺少最小化的动画和分屏）。 我是业余的，水平不高，这是我能想到最完美的解决方案了。
自定义边框的制作与换色（canvas与css3）
xin5732的博客
05-28 2125
自定义边框的实现。
【前端冷知识】Canvas 滤镜的性能优化
奇舞周刊
08-24 586
最近几天没有及时更新，是因为这几天在忙一个项目mesh.js，这个项目是一个基于Canvas2D和WebGL的跨平台图形系统，提供底层的高性能API，同时也将是未来新版S...
filter滤镜
weixin_57766703的博客
03-08 272
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 1、grayscale灰度（值为0-1之间的小数） filter:grayscale(1); -webkit-filter:grayscale(1); 0表示灰度为0%，显示原图，1表示灰度为100%灰色。 2、sepia褐色（值为0-1之间的小数） filter:sepia(1); -webkit-filter:sepia(1); 0表示褐色度为0%，显示原图，1表示褐色度为100%显示...
js去除png格式的图片阴影
oscar999
08-22 526
借用一句话： PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。 针对以上问题，IE浏览器本身提供了...
drop-shadow 详解
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
02-24 2万+
属性 例子 png小图片变色 QA 关于兼容性 属性 css3 属性：filter: drop-shadow 滤镜 要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。 filter 中的 drop-shadow 与 box-shadow 有...
server: port: 8080 spring: datasource: username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/db?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8 druid: initial-size: 5 min-idle: 5 max-active: 20 max-wait: 60000 time-between-eviction-runs-millis: 60000 min-evictable-idle-time-millis: 100000 max-evictable-idle-time-millis: 300000 validation-query: SELECT 1 FROM DUAL test-while-idle: true test-on-borrow: false test-on-return: false pool-prepared-statements: true aop-patterns: com.example.demo.* stat-view-servlet: enabled: true login-username: root login-password: 123456 web-stat-filter: enabled: true url-pattern: /* exclusions: '*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*' filters: stat,wall filter: stat: slow-sql-millis: 1000 log-slow-sql: true enabled: true wall: enabled: true config: drop-table-allow: false重写yml格式
07-13
我可以帮你重新格式化这段YAML格式的文本，如下所示： ```yaml server: port: 8080 spring: datasource: username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/db?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8 druid: initial-size: 5 min-idle: 5 max-active: 20 max-wait: 60000 time-between-eviction-runs-millis: 60000 min-evictable-idle-time-millis: 100000 max-evictable-idle-time-millis: 300000 validation-query: SELECT 1 FROM DUAL test-while-idle: true test-on-borrow: false test-on-return: false pool-prepared-statements: true aop-patterns: com.example.demo.* stat-view-servlet: enabled: true login-username: root login-password: 123456 web-stat-filter: enabled: true url-pattern: /* exclusions: '*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*' filters: stat,wall filter: stat: slow-sql-millis: 1000 log-slow-sql: true enabled: true wall: enabled: true config: drop-table-allow: false ``` 希望这样的格式更易读和明了。如果你还有任何其他问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值