[003]filter:drop-shadow属性

本文探讨了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

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);
drop-shadow

若是用box-shadow就会出现这种情况
pic

挑战

  1. 用filter:drop-shadow来实现麦当劳标志
    麦当劳
    效果预览
    代码地址
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值