大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注➕ 點贊 👍
搜尋添加公衆号「半夏話前端」：
🍗 硬核資料：領取1000+PPT模闆、100+履歷模闆、行業經典書籍PDF。
🍗 回複 ”網站模闆“，免費送網站模闆！
🍗 回複[算法]，擷取各種算法資料！
前言
學以緻用 [xué yǐ zhì yòng]
學以緻用，漢語成語，拼音是xué yǐ zhì yòng，意思是為了實際應用而學習。出自《為有源頭活水來》。
學習一門程式設計語言，不僅僅是學習他的文法，而是要将它應用到具體的場景中去。隻有這樣才能更好的從入門到精通。
對于CSS來說，由于CSS的特殊性，導緻它的學習不能局限于眼觀，而是要放到真是的DOM中才能更好的體會具體屬性的具體價值。
在之前的文章box-shadow我們學習了box-shadow的用法，今天我們就用這個屬性來編寫一個小小的例子，實作一個手風琴懸停的效果。
在開始之前我們先再簡單的回憶一下box-shadow的用法.
box-shadow:offset-x offset-y blur spread color position;
x-offset 在 x 軸上的位置。正值将陰影向右移動，負值将陰影向左移動。（必需的）
y-offset y 軸上的位置。正值将陰影移動到底部，負值将陰影移動到頂部。（必需的）
blur 陰影應該有多少模糊。值越高，陰影越柔和。預設情況下，該值設定為 0px，表示沒有模糊。（可選的）
spread 指定陰影的延伸尺寸，值越大，增加的越多。（可選的）
color陰影應該有什麼顔色。預設值為文本顔色。（可選）
inset 陰影的位置。預設情況下，陰影在框外。設定插圖将其移至内部。（可選的）
使用variables定義顔色
為啥會考慮使用變量：
- 因為同一顔色會被多次使用
- 因為之前學習過CSS變，這裡就是要學以緻用。
這裡為了更清晰我們定義在:root上：
紅 橙 黃 綠 藍 背景白
--background:#fff;
--red: #e74c3c;
--orange: #ff9c55;
--yellow:#f1c40f;
--green: #1fc11b;
--blue: #22d2a0; 下面具體的開始：
建立卡片
建立一個div
<div class="card">
<p>手風琴懸停效果</p>
</div> 這裡我給他加了一個border的邊框。
border: 3px solid var(--red); 
添加shadow
最終的效果是這樣子的，看上去是加了4個shadow，但是大家仔細考慮一下，僅僅是4個夠用嗎。
先來看一下僅僅4個陰影的效果：
box-shadow: 10px -10px var(--orange), 20px -20px var(--yellow),、30px -30px var(--green), 40px -40px var(--blue); 可以清除的看到，陰影之間并沒有白色的部分，是以，再整個裡面外圍，我們是需要8個陰影的。
我們是在每個陰影之間加上了一個白色的陰影，并且使用了spread屬性，将陰影回撤3px,這樣看上去就有4個3px的陰影了！
box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
30px -30px 0 -3px var(--background), 30px -30px var(--green),
40px -40px 0 -3px var(--background), 40px -40px var(--blue); 添加hover效果
hover的時候我們需要做的是啥呢，是不是需要把所有的陰影收回。怎麼收回呢，很簡單，把所有的陰影都去掉不就了。
并且為了動畫的連續性，我們使用
transition: box-shadow 1s； 這樣有人就會考慮了：直接将box去掉就可以了。
.card:hover {
box-shadow:none;
} transition: box-shadow 1s, top 1s, left 1s;
大家可以看下下圖的效果，在回收的時候是不是陰影越來越淡。并不符合手風琴的效果的。
這裡我們其實主要把偏移變成0就可以了。
box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--orange),0 0 0 -3px var(--background), 0 0 0 0 var(--yellow),
0 0 0 -3px var(--background), 0 0 0 0 var(--green),
0 0 0 -3px var(--background), 0 0 0 0 var(--blue); 這裡我們可以看到手風琴的陰影在回收的時候一直都是存在的。
并且是往最前面的紅色回收的，如果我們想要往最裡面的藍色回收呢，大家看可以思考一下，文末會放出答案。
往裡回收
transition: box-shadow 1s, top 1s, left 1s;
position: relative;
top: 0;
left: 0;
.card:hover {
top: -40px;
left: 40px;
}