[003]filter:drop-shadow属性

最新推荐文章于 2024-04-08 23:51:29 发布

原创最新推荐文章于 2024-04-08 23:51:29 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

css奇技淫巧专栏收录该内容

4 篇文章

订阅专栏

本文探讨了CSS属性filter:drop-shadow的应用，对比box-shadow，它能更真实地呈现元素投影，尤其适用于复制颜色单一的镂空物体。通过实例展示了如何仅使用一个元素并结合drop-shadow创建复杂图案，如麦当劳标志。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter:drop-shadow

drop-shadow(h-shadow v-shadow blur spread color)

跟box-shadow的参数差不多，至不够没有了inset(内阴影的参数)

常用写法

filter: drop-shadow(20px 20px 0px red);

drop-shadow相比box-shadow的最大的优势就是，它才是真正意义上的投影

 div{
        width: 30px;
	height: 30px;
	border: 10px dashed yellow;
        box-shadow: 20px 20px 0 red;
    }

box-shadow

 div{
         width: 30px;
         height: 30px;
         border: 10px dashed yellow;
         filter: drop-shadow(20px 20px 0 red);
     }

drop-shadow
在box-shadow中，我们中间是镂空的，可是它的投影却不是。显然这不符合我们的要求。那它有什么用呢，那就是它可以完完全全的复制颜色单一的镂空物体。
看下面的挑战，麦当劳中的m是有两个n所拼接而成的，若是平时我们就用:before来创建左半边的n,然后在用:after来创建右半边的n,然后在通过绝对定位把他们拼接在一起。
现在我们可以只创建出一个n,然后利用filter: drop-shadow(16em 0 0 yellow);