drop-shadow 详解，retrofit原理面试

最新推荐文章于 2024-09-04 23:13:34 发布

拒绝戎余

最新推荐文章于 2024-09-04 23:13:34 发布

阅读量937

点赞数 24

分类专栏： 2024年程序员学习文章标签： retrofit 面试职场和发展

本文链接：https://blog.csdn.net/2301_76379671/article/details/137848968

版权

2024年程序员学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

例子
png小图片变色
Q&A
关于兼容性

属性

================================================================

css3 属性：filter: drop-shadow 滤镜

要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。

filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异

例如：

filter:drop-shadow(5px 5px 10px black)

drop-shadow没有内阴影效果
drop-shadow不能阴影叠加

例子

================================================================

下面看一个例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { margin: 40px; padding: 50px; background-color: #fff; position: relative; font-size: 24px; } .cor { position: absolute; left: -40px; width: 0; height: 0; overflow: hidden; border: 20px solid transparent; border-right-color: #fff; } .drop-shadow { filter: drop-shadow(5px 5px 10px black); } </style> </head> <body> <div class="box drop-shadow"> <i class="cor"></i> filter: drop-shadow </div> </body> </html>

效果图如下：