阴影（Boxshadow）是CSS3的特性之一，该效果主要反应为立体效果或是说3D效果，下面向大家介绍如何使用在线CSS3工具-CSS3 Generator生成定制的并兼容各种浏览器的阴影特效CSS3代码。
工具/原料
浏览器
1. 打开CSS3在线设计工具网站CSS3 Generator
2. 完成基本样式设置
1
点击“edit the basics”按钮， 打开基本设置面板，设置border（边框）宽度、颜色、背景色。编辑面板如下图所示：
2
点击border-radius面板右侧的“+”展开border-radius设置面板，按需要设置四个边角的圆度。
3. 打开box-shadow阴影设置面板
点击box-shadow右侧的“+”用以展开box-shadow设置面板。
4. 设置box-shadow阴影效果
1
设置阴影水平偏移量。在“horizontal”右侧的输入框中输入偏移量，其值可以是正数，也可以是负数。正数：阴影在对象的右边。负数：阴影在对象的左边。
2
设置阴影垂直偏移量。在“vertical”右侧的输入框中输入偏移量，其值可为正数和负数。如果为正数，阴影在对象的底部，其值为负数时，阴影在对象的顶部。
3
设置阴影模糊半径。在“blur”右侧的输入框中输入模糊半径值，其值为非负数，为0时，表示阴影不具有模糊效果，其值越大则阴影的边缘就越模糊。
4
设置阴影扩展半径。在“spread”右侧的输入框中输入阴影扩展半径值，其值可正可负，如果为正，则整个阴影都延展扩大，为负则缩小。
5
设置阴影色。在“shadow”右侧的颜色面板中选择阴影颜色，此参数可选, 如果不设定，浏览器会取默认色，但各浏览器默认色不一样，webkit内核的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色，最好不要省略此参数。
6
设置阴影类型：支持两种阴影类型，外阴影和内阴影，此参数可选。如不设置，则默认外阴影，如设置为“inset”，则其投影类型为内阴影。
5. 预览并生成CSS3样式代码
1
在右侧的预览面板预览设置后的阴影效果。
2
点击“GET THE CODE!”按钮生成CSS3代码
3
在生成的代码窗口选择支持的浏览器类型，然后点击“Select Code”拷贝样式代码到自己的代码中。