html给文字添加阴影效果,如何设置样式之添加文字阴影、边框阴影或者添加自己的CSS...

以下的例子只是样式面板的使用案例之一，样式面板功能很强大，几乎能完成您的所有需求，详情参阅这里。边框的案例可以参阅这里。

一、如何给文字添加阴影效果

首先，打开CSS工作面板

请依次点击：右侧栏“样式面板”按钮(见第三项图中①) >>“样式设置”中的CSS按钮 (见第三项图中②)，打开CSS工作面板。

第二步，选定元素

在编辑区点击一下元素(或选定文字)(见第三项图中③)，目的是选定将要添加CSS的元素；

温馨提示：别忘记了每次操作前要选择和确认一下所应用到的类型(见第三项图中④)。

第三步，输入CSS代码

在上方输入框中(见第三项图中 ⑥)直接输入CSS阴影代码，比如 text-shadow:6px 3px 1px #bfb007;

温馨提示：CSS阴影代码的最后面有一个英文分号，不要忘记了。

第四步，点击“追加”按钮(见第三项图中 ⑦ )将CSS代码添加到元素中，即可添加文字阴影。效果如下：

温馨提示：CSS阴影效果能否起效，取决于你的邮箱能否支持，所以在使用前先给自己发送一封测试邮件，查看最终的效果。

- 2020 -

最简单的邮件

Newsletter定制平台

肯为旎邮件DIY | 2020.02.16

二、如何给边框添加阴影效果

首先，打开CSS工作面板

请依次点击：右侧栏“样式面板”按钮(见第三项图中①) >>“样式设置”中的CSS按钮 (见第三项图中②)，打开CSS工作面板。

第二步，选定元素

在编辑区点击一下元素(或选定文字)(见第三项图中③)，目的是选定将要添加CSS的元素；

温馨提示：别忘记了每次操作前要选择和确认一下所应用到的类型(见第三项图中④)。

第三步，输入CSS代码

在上方输入框中(见第三项图中 ⑥)直接输入CSS阴影代码，比如 box-shadow:9px 2px 16px #bfb007;

温馨提示：CSS阴影代码的最后面有一个英文分号，不要忘记了。还有，别忘记按照添加边框的方法添加边框。

第四步，点击“追加”按钮(见第三项图中 ⑦ )将CSS代码添加到元素中，即可添加边框阴影。效果如下：

温馨提示：CSS阴影效果能否起效，取决于你的邮箱能否支持，所以在使用前先给自己发送一封测试邮件，查看最终的效果。还有，如果单元格添加边框阴影效果无效或效果不好，可考虑先添加div容器，然后将元素(文字)移动到div容器中，再给再div添加边框阴影效果。

- 2020 -

最简单的邮件

Newsletter定制平台

肯为旎邮件DIY | 2020.02.16

三、查看CSS样式或者自己添加样式(CSS代码)

你可以随意查看任一级元素的样式代码(CSS代码)，也可以任意添加样式代码(CSS代码)，甚至一言不和就完全删除原来的样式，干脆按照自己的设计写CSS样式。

首先，请依次点击：右侧栏“样式面板”按钮(见图中①) >>“样式设置”中的CSS按钮 (见图中②)，打开CSS工作面板。

其次，在编辑区点击一下元素(或选定文字)(见图中③)，目的是选定元素；

温馨提示：别忘记了每次操作前要选择和确认一下所应用到的类型(见图中④)。

接下来，就可以分别点击相应的按钮来查看、添加，清除操作了。

查看CSS代码：点击“查看”按钮(见图中⑤)，会在按钮下方显示选定元素所具有的CSS代码。

追加CSS代码：在上面的输入框中(见图中 ⑥)输入自己写的代码，比如文字阴影：text-shadow:9px 5px 2px #FF0000; 再点击“追加”按钮(见图中 ⑦ )即可完成添加。添加完成后可点击“查看”按钮(见图中⑤)，查看所追加的代码。

温馨提示：追加代码并不会覆盖原来的代码，所以不要多次追加同样的代码，以避免代码冗余。如果已经添加了多次同样代码，请按照“修改现有CSS代码”方法来修改。

清除CSS代码：点击“清除”按钮(见图中 ⑧ )，会清除选定元素所具有的CSS代码。

修改现有CSS代码：首先，点击“查看”按钮(见图中⑤)，并复制下方所显示的CSS代码；第二步，将CSS代码粘贴到上方输入框中(见图中 ⑥)，并在此处直接修改CSS为自己想要的值；第三步，点击“清除”按钮(见图中 ⑧ )，清除选定元素现有的CSS代码；第四步，点击“追加”按钮(见图中 ⑦ )将CSS代码添加到元素中，即可完成修改。

完全自行写CSS代码：首先，点击“清除”按钮(见图中 ⑧ )，清除选定元素现有的CSS代码；第二步，在上方输入框中(见图中 ⑥)直接输入CSS代码；第三步，点击“追加”按钮(见图中 ⑦ )将CSS代码添加到元素中，即可完成CSS写入。

查看位置：点击“位置”按钮(见图中 ⑨ )，会显示选定元素的所在位置(见图中③)和类型(见图中 ⑩ )。