本技巧來自這篇文章 -- how to animate box-shadow with silky smooth performance
本文不是直譯，因為覺得這個技巧很有意思很有用，遂起一文。
box-shaodw在我們的工作中使用以及越來越多，伴隨陰影的動畫或多或少都有一點。假設，我們有下面這樣乙個盒子：
divbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)過渡到box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。
ok，最簡單的方法當然是：
div:hover這裡有乙個小技巧可以優化這種情況下的陰影動畫。
**搜尋 biqi.org
使用偽元素及透明度進行優化，我們給上述元素新增乙個 before 偽元素，大小與父 div 一致，並且提前給這個元素新增好所需要的最終的盒陰影狀態，但是元素的透明度為 0。
div
div::before
div:hover::before為什麼對透明度opacity進行動畫要比對box-shadow進行動畫效能更好呢？可以看看這裡這張**，列舉了不同屬性變換對頁面重排、重繪的影響：
最後，demo 可以看看：
codepen demo -- 優化box-shadow動畫
原文中上述這個方案其實並不算太完美，因為最終的效果是兩個陰影的疊加效果，可能會在整體的感覺上陰影顏色更深了一點。
所以需要對最終狀態的陰影進行微調一下，削弱一點效果，盡量讓兩個陰影的疊加效果與單一乙個陰影效果相近。
當然，我們可以再對上述方案進行優化，我們再使用乙個::after偽元素，::after偽元素設定為初始狀態且透明度為1，::before偽元素設定為末尾狀態且透明度為0：
div
div::before
div::after
codepen demo -- 優化box-shadow動畫
好了，本文到此結束，希望對你有幫助 :)
duilib list效率優化小技巧一則
經常有人問list資料量上萬的時候，更新效率很低的問題 事實上，對任何介面庫，資料量大到一定程度，優化都是必須的 有人提出了虛擬視窗的方法，就是list只維護少數item，滾動的時候根據顯示範圍調整這幾個item的顯示屬性。這也是個優化方法，而且能夠處理的資料量級理論上非常大。不過這種方法不是太通用...
Shell 小技巧一則
經常與 shell 為伍的你是不是也會經常碰到下面這些情境 vern 兄攢寫 1 mv somewhere file your folder 2 vi your folder file 要儲存某些檔案到特定目錄，然後開始檢視 編輯 1 cp somewhere foo.c somewhere foo...
Mysql的優化一則
目的在於這麼乙個sql語句 select w.from wall w inner join wall category relation r on w.wall id r.wall id where r.category level1 id 39 and w.is online 1 order by...