原理就是用到css3 滤镜filter中的drop-shadow,该滤镜可以给图片非透明区域添加投影
语法:
filter:drop-shadow(水平阴影偏移距离 垂直阴影偏移距离 投射的阴影颜色 );
1
首先准备一张背景色透明的图片如下:
用一个div将该图片包裹住,给图片添加:
filter: drop-shadow(15px 0px #fff)
这段代码,代表投射出一个和该图片一样的形状,
三个参数分别代表:
水平向右移动15px,
垂直方向不变,
投射出的形状颜色为白色。
接下来我们将原图设置在div外部并隐藏,变色后的投影放置在div中
完整代码为:
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="utf-8" />
? ? ? ? <title></title>
? ? ? ? <style type="text/css">
? ? ? ? ?? ?.search_wrap{
? ? ? ? ?? ??? ?width:45px;
? ? ? ? ?? ??? ?height:40px;
? ? ? ? ?? ??? ?background: #F45350;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?justify-content: center;
?? ??? ??? ??? ?align-items: center;
? ? ? ? ?? ?}
? ? ? ? ? ? .box{
? ? ? ? ? ? ? ? width: 15px;
? ? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? ? ? text-indent: -15px;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? }
? ? ? ? ? ? .pic{
?? ??? ??? ??? ?width: 15px;
?? ??? ??? ??? ?height: 15px;
? ? ? ? ? ? ? ? filter: drop-shadow(15px 0px #fff);
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ??? ?<div class="search_wrap">
?? ? ? ? ? ?<div class="box">
?? ? ? ? ? ? ? ?<img src="./img/search.png" class="pic"/>
?? ? ? ? ? ?</div>
?? ? ? </div>
? ? </body>
</html>