批量圖檔添加外陰影效果

Mac OS 系統上，在獲得焦點程式的周邊，有一層淺灰色外陰影，使得應用程式看起來略帶立體感；其陰影漸進變淡，與背景色融合在一起，也使得看起來流暢自然，不突兀。在一些優質博文中，所搭配的圖檔，也經常能看到這樣的設計，增色不少。那如何為文章圖檔，添加好看的外陰影效果呢？本文即對此做出一些探讨。

對于這個需求，可以從多個不同的緯度去解決；最容易想到的即這兩個：1. 通過 css 為圖檔，添加外陰影樣式；2. 修改圖檔本身，為其添加外陰影；下面就基于這兩個方案做下探讨。

基于box-shadow “盒陰影”，此屬性用于在元素的架構上添加陰影效果，該屬性可設定的值包括 X 軸偏移、Y 軸偏移、陰影模糊半徑、陰影擴散半徑，和陰影顔色，并以多個逗号分隔。

Box-shadow generator 是一個允許你生成 box-shadow 的互動式工具。

使用 CSS3 的filter陰影濾鏡 drop-shadow；此函數有點類似于 box-shadow 屬性；box-shadow 屬性在元素的整個框後面建立一個矩形陰影, 而 drop-shadow() 過濾器則是建立一個符合圖像本身形狀 ( alpha 通道)的陰影。其文法是：

對比這兩個方案，采用 drop-shadow 是更加可取的方案；box-shadow，隻是盒子的陰影；倘若盒子中間是透明的，其光線不能穿透；但是drop-shadow就符合真實世界的投影； 具體可以參見張鑫旭的文章：CSS3 filter:drop-shadow 濾鏡與 box-shadow 差別應用。當然，box-shadow 不僅可以外陰影，還可以有内陰影，且能無限疊加，是以可以在其他一些場景，發揮更大的作用。

處理圖檔的工具非常之多，不僅有為世人所熟知的 PhotoShop，就拿常見的程式設計語言如 Pyhton，Node.js, Lua 等，也都充盈了很多處理圖檔的庫；這裡推薦一款 imagemagick，它的功能是如此的豐富，添加外陰影更是不在話下。

如果您使用的是 Mac，可以通過如下指令，一鍵安裝（其他平台，可以下載下傳對應軟體，參見 imagemagick download）：

安裝完成之後，通過以下指令，即可對指定的圖檔（ input.jpeg），添加外陰影處理：

需要補充說明的是，.jpg 格式圖檔，屬于有損壓縮，導緻該圖檔沒有透明選項；是以，對 .jpg 格式添加外陰影，該陰影也不具有透明度；可以通過如下指令，對 .jpg 格式進行轉換 .png 處理。

如果要批量對一些圖檔，添加外陰影處理，一個個輸入指令來完成，未免繁瑣；可以将其寫在一個腳本中，高效一鍵處理；有在原本維護的工具 arya-jarvis 中注入了這個功能，可助您高效完成：