如何设置样式之添加文字阴影、边框阴影或者添加自己的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写入。

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

温馨提示:

1、使用此处的位置类型查看,再配合CSS代码查看法,就可以全面了解元素及其所具有的属性,为自己的设计提供坚实的基础。

2、如果是邮件,添加的CSS代码必须是邮箱所兼容的,否则会没有效果;如果是手机分享页面,只要在编辑区有效果,一般情况下不同平台(比如PC或手机)都能兼容和正常显示。