[密技] 將Chrome瀏覽器化身為CSS3網頁編輯器，即見即所得的產生文字、區塊陰影效果

　　對於網頁設計網頁的朋友，應該對Chrome瀏覽器的開發人員工具不感陌生，透過這個開發人員工具，不但可快速幫網頁進行除錯外，甚至也可使用它，來尋找網頁區塊中的CSS樣式設定，並且還能即時的修改，即時的預覽結果畫面，這對於在設計網頁上，是件相當方便的事。

  而除了可以修改CSS的樣式定外，在這個開發人員工具中，還內建了幾個CSS3中常用的效果，像是區塊陰影、文字陰影，或是更改文字顏色、背景色，都能透過視覺化的界面，直接拖拉，即時的顯示效果，完全不用再背語法，與憑空想像，唯有眼睛看到才算數，因此現在就一塊來看看，Chrome開發人員工具中，隱藏的CSS小工具吧！

---

Step1
首先先開啟Chrome瀏覽器的開發人員工具，快速鍵為F12，開啟後再將頁籤切到Elements。

---

Step2
接著點選第一個選取區塊圖示，再將滑鼠移到要選擇的區塊上，當選取後，區塊上方會覆蓋一層淡藍色。

---

Step3
這時在右下的區塊中，就會帶這個區塊的CSS樣式設定，除此之外在設定面板的右下角，會看到三個點。

---

Step4
將滑鼠滑入後，立即就會開啟這個神密的工具，分別有背景色、文字色、文字陰影、區塊陰影…等選項。

---

Step5
當要修改背景色，點選後，就會出現色盤，讓你可自由的選擇所需的顏色，甚至還可設定顏色的透明度，且在設定的過程中，畫面也會即時顯示，立即就可知道效果如何。

---

Step6
甚至也可改變文字的顏色與透明度。

---

Step7
最酷的是這個功能，可以幫區塊加陰影，甚至還可調整影子的角度與柔化效果。

---

Step8
且在區塊陰影的部分，還可設為內陰影，這樣區塊就有點像是嵌進去的感覺。

---

Step9
甚至文字也可製作陰影。

---

Step10
當把文字陰影設定好後，還可修改影子的顏色與透明度，因此透過這四個小工具，就可讓你快速的設定顏色與陰影啦！且還是即見即得，超方便的啦！