原理就是用到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>
扫一扫
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
