以下的例子只是样式面板的使用案例之一，样式面板功能很强大，几乎能完成您的所有需求，详情参阅这里。边框的案例可以参阅这里。
一、如何给文字添加阴影效果
首先， 打开CSS工作面板
请依次点击：右侧栏“样式面板”按钮（见图中①） >>“样式设置”中的CSS按钮 （见图中②）， 打开CSS工作面板。
第二步，选定元素
在编辑区点击一下元素（或选定文字）（见图中③），目的是选定将要添加CSS的元素；
温馨提示：别忘记了每次操作前要选择和确认一下所应用到的类型（见图中④），即根据将要设置内容的不同类型，而选中不同的选项，比如单元格或元素，等等。
第三步，输入CSS代码
在上方输入框中（见图中 ⑥）直接输入CSS阴影代码，比如 text-shadow:6px 3px 1px #bfb007;
温馨提示：CSS阴影代码的最后面有一个英文分号，不要忘记了。
第四步，点击“追加”按钮（见图中 ⑦ ）将CSS代码添加到元素中，即可添加文字阴影。效果如下：
温馨提示：CSS阴影效果能否起效，取决于你的邮箱能否支持，所以在使用前先给自己发送一封测试邮件，查看最终的效果。
|
二、如何给边框添加阴影效果
首先， 打开CSS工作面板
请依次点击：右侧栏“样式面板”按钮（见第一项图中①） >>“样式设置”中的CSS按钮 （见第一项图中②）， 打开CSS工作面板。
第二步，选定元素
在编辑区点击一下元素（或选定文字）（见第一项图中③），目的是选定将要添加CSS的元素；
温馨提示：别忘记了每次操作前要选择和确认一下所应用到的类型（见第一项图中④）。
第三步，输入CSS代码
在上方输入框中（见第一项图中 ⑥）直接输入CSS阴影代码，比如 box-shadow:9px 2px 16px #bfb007;
温馨提示：CSS阴影代码的最后面有一个英文分号，不要忘记了。还有，别忘记按照添加边框的方法添加边框。
第四步，点击“追加”按钮（见第一项图中 ⑦ ）将CSS代码添加到元素中，即可添加边框阴影。效果如下：
温馨提示：CSS阴影效果能否起效，取决于你的邮箱能否支持，所以在使用前先给自己发送一封测试邮件，查看最终的效果。还有，如果单元格添加边框阴影效果无效或效果不好，可考虑先添加div容器，然后将元素（文字）移动到div容器中，再给再div添加边框阴影效果。
|
三、查看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或手机）都能兼容和正常显示。