技術標籤：H5/CSS

參考部落格：CSS改變圖示顏色

實現思路：
使用filter，在原圖示旁邊生成它的任意顏色的投影。
把圖示放入容器，通過相對定位改變它和投影的位置。
對容器設定overflow:hidden，隱藏原圖，只留投影。

黑色邊框為容器，僅作演示，開啟overflow:hidden後只保留陰影

備註：在Chrome瀏覽器下(低版本)，如果一個元素的主體部分，無論以何種方式，只要在頁面中不可見，其drop-shadow是不可見的；實體部分哪怕有1畫素可見，則drop-shadow完全可見。

HTML:

	<div class="wrap"
 
>
	<img src="./picture/gj01.png">
	</div>

CSS:

	.wrap {
	width: 60px;
	height: 60px;
	overflow: hidden;
	margin-left: 120px;
	/*border: 5px solid black; 僅用於演示*/
	}

	img {
	width: 60px;
	height: 60px;
	position: relative;
	left: -60px;
	border-right: 60px solid transparent;
	/*這一句似乎可有可無*/
 

	filter: drop-shadow(60px 0px 0 red);
	}

將該方法應用於小米專案，再設定overflow:hidden，hover時改變left值，完美！