标签:width 通过 col inline 添加 投影 一个 spl 图标
<style> .icon-color{ display: inline-block; width: 144px; height: 144px; overflow: hidden; } .icon-color:after{ content: ‘‘; display: block; height: 100%; transform: translateX(-100%); background: url(‘https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba?w=144&h=144&f=png&s=2780‘) no-repeat center / cover; filter: drop-shadow(144px 0 0 #42b983); } </style> <i class="icon-color"></i>
使用 CSS3
滤镜 filter
中的 drop-shadow
。
drop-shadow
滤镜可以给元素或图片非透明区域添加投影overflow:hidden
和位移处理将原图标隐藏标签:width 通过 col inline 添加 投影 一个 spl 图标
原文地址:https://www.cnblogs.com/jackjo/p/9449403.html