天分享下如何給圖片加陰影，可以是單張，也可批量處理。

一、適用場景

想象有如下一個場景：寫文章的時候，背景色是白色，然后你截了一張圖周圍的邊緣也是白色，那截圖和背景之間就完全融為一體，完全沒有邊界感。如下圖：

如果給圖片加上陰影，文字和圖片之間就有了一層邊界，圖片內容也就更突出。

當然給圖片加陰影的方式也很多。比如word和powerpoint中使用圖片效果選項就可以給圖片加陰影，css來給圖片加陰影顯示效果、mac的窗口截圖可以自帶陰影，或者一些付費軟件WinSnap、Ashampoo Snap等。

二、ImageMagick介紹

我們今天介紹的是一款免費軟件——“ImageMagick”。這是一款強大的圖像處理工具，macos、linux和windows都有相應的版本。連photoshop安裝路徑下都有它的身影。

本文介紹windows下的使用。

三、安裝ImageMagick

首先你需要先去官網下載：

地址：https://imagemagick.org/script/download.php

選擇windows適用的版本。或者你可以直接在

https://wwp.lanzoul.com/icoyF0ep9vrc

密碼:4em8

獲取安裝包。

下載好后直接一路“next”安裝就ok了。不建議你在百度上隨便搜一下，下載一個任意版本的安裝包，互聯網確實是個寶庫，但同時它也是個名副其實的垃圾場。網上很多過時的信息，還需你自己分辨。如果要百度搜的話記得選7.0版本以后的。我就被網上的信息坑過。

四、使用方法:

4.1安裝時需要注意

在安裝imagemagick的時候，安裝程序會默認將magick.exe添加到環境變量里。安裝程序上默認勾選的選項不用更改。

4.2命令的基本格式

magick convert的基本格式是：

magick convert 源文件 [參數] 處理后的文件

4.3使用實例

打開cmd命令行窗口。輸入:(注：下面這些是一行代碼)

magick convert "要轉換的圖像路徑名稱" ( +clone -background grey -shadow 60x20+0+24 ) +swap -background none -layers merge +repage "轉換后圖像的路徑名稱"

比如你在D盤下的一個文件"D:/1.png",加陰影，加陰影后的文件還在D盤，叫"2.png"，應輸入如下命令:

magick convert "D:/1.png" ( +clone -background grey -shadow 60x20+0+24 ) +swap -background none -layers merge +repage "D:/2.png"

演示視頻：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

4.4命令參數簡介

shadow命令官方頁面：

https://legacy.imagemagick.org/Usage/blur/#shadow_offset

這里大家要注意上方命令的幾個參數：一般不用更改，但是你要想嘗試可修改下面幾個參數。

60x20+0+24和grey。

60：代表陰影圖層的不透明度。對圖片影響不大，沒必要改。

20：代表陰影模糊度，20左右就挺好看，你也可以根據自己喜好修改。如果是0，就是一個硬陰影。如下圖圖片中灰色的部分：

+0：代表陰影左右偏移量，0表示不向右偏移，+1向右偏移1個px，-1向左偏移1個px。

+24：代表陰影左右偏移量，0表示不向下偏移，+24向右偏移24個px，-24向左偏移24個px。

grey：代表陰影顏色，你可以更改為navy"海軍藍"等其他顏色。

五、一鍵給多張圖片加陰影

使用quicker動作"圖片陰影"。它的原理就是使用上面介紹的這個imagemagick命令。所以這個方法使用的前提是先安裝好imagemagick。。

關于quicker的下載及動作的安裝可參考這個視頻：

https://www.bilibili.com/video/BV1Be4y177j4/

把搜索動作的關鍵詞替換為"圖片陰影"即可。

然后這個動作的使用方法：安裝好動作之后，選中需要加陰影的文件，運行動作即可。

本文完。覺得有幫助的話幫忙點個贊吧朋友們~ 拜拜~

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著Web技術的不斷演進，CSS3以其強大的視覺表現力，賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術，通過詳盡的理論講解和豐富的實例演示，助您掌握這些技巧，打造出令人眼前一亮的網頁視覺盛宴。

一、魅力漸變：色彩的藝術流動

1. 線性漸變：平滑過渡，簡約而不簡單

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代碼創建了一個從左至右，由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向（如`to bottom`、`45deg`等）、添加更多顏色停止點來豐富漸變效果。

2. 徑向漸變：聚焦視覺中心，營造立體感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我們創建了一個以元素中心為圓心，從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以靈活定制徑向漸變樣式。

二、立體陰影：賦予元素生命與空間感

1. 盒子陰影（Box Shadow）：輕松實現三維效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數（水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色）并靈活運用，即可創造出豐富的陰影效果。

2. 文本陰影（Text Shadow）：讓文字躍然紙上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);

此處為文本設置了兩個陰影：一個向右下偏移、顏色較深的陰影，以及一個向左上偏移、顏色較淺的陰影，形成微妙的浮雕效果。通過疊加多個陰影、調整參數，您可以創作出各種獨特的文本樣式。

三、神奇遮罩：掌控元素可見度與透明度

1. CSS Mask：精細裁剪，展現獨特視界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

該代碼為元素應用了一個從左至右的線性漸變遮罩，使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

2. CSS Clip Path：創意裁剪，打破常規布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代碼使用多邊形裁剪路徑，將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型，甚至借助SVG路徑實現更為復雜的裁剪效果。

四、實戰案例：融合三大技術，打造視覺盛宴

案例一：動態漸變按鈕

css
/* 定義CSS變量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS變量、偽類和動畫，創建一個點擊時背景漸變顏色動態變化的按鈕：

案例二：懸浮卡片與陰影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

結合盒子陰影與:hover偽類，實現鼠標懸停時卡片陰影增強的交互效果：

案例三：遮罩疊加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩與多重背景，創造出文字在圖片上淡入淡出的特效：

結語

CSS3的漸變、陰影與遮罩技術，如同網頁設計的調色板、光影魔術師和剪刀手，賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術，您將能打造出既美觀又富有創意的網頁界面，為用戶帶來極致的視覺體驗。持續探索、實踐與創新，您的每一個作品都將成為Web世界中的一道獨特風景。

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

<p>Text Shadow</p>

p {
 font-family: 'Muli', sans-serif;
 font-size: 47px;
 font-weight: 900;
 color: #CFC547;
}

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

.text {
 text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}