天分享下如何给图片加阴影，可以是单张，也可批量处理。

一、适用场景

想象有如下一个场景：写文章的时候，背景色是白色，然后你截了一张图周围的边缘也是白色，那截图和背景之间就完全融为一体，完全没有边界感。如下图：

如果给图片加上阴影，文字和图片之间就有了一层边界，图片内容也就更突出。

当然给图片加阴影的方式也很多。比如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);
}