一个精致的盒子CSS3阴影边界的阴影效应影响的方法

效果演示：
箱的阴影中添加一个或多个阴影框。IE9，Firefox 4，Chrome，Opera，Safari 5.1.1和支持框阴影属性。
Grammar：
代码如下：
CSS代码将内容复制到剪贴板。
盒子的影子：插图h-shadow v-shadow模糊扩散的颜色；

h-shadow，v-shadow必须水平、垂直投影的位置，允许分配。模糊可选，模糊距离。传播可选，阴影的大小，颜色可选，阴影的颜色，插图，或者，改变外部的影子（开始）到内部的影子。
看几个简单的例子：
xml代码将内容复制到剪贴板。

一
B
C
D
E
F
G
H

首先，以简单的方式设置它们：
CSS代码将内容复制到剪贴板。
{。箱
背景颜色：# FFF；
边境：3px固体# CCC；
浮点数：左；
保证金：00 20px 40px；
身高：65px；
宽度：160px；
文本对齐：中心；
}
{。字幕
字体大小：20px；
职位：相对；
上图：20px；
}

那么来练习各种参数的使用，h-shadow和v-shadow至少两参数要求时，基本上是用盒子的影子：
CSS代码将内容复制到剪贴板。
框：第n个子（1）{
WebKit的影子：3px 3px # f3d42e盒；
-moz盒阴影：3px 3px # f3d42e；
盒子的影子：3px 3px # f3d42e；
}

如果距离是正的或右下的或偏移的；否则向左或向右
然后添加5px模糊半径：
CSS代码将内容复制到剪贴板。
框：第n个子（2）{
Webkit框阴影：3px 3px 5px # f3d42e；
-moz盒阴影：3px 3px 5px # f3d42e；
盒子的影子：3px 3px 5px # f3d42e；
}

扩散距离将增强实际阴影的范围。
CSS代码将内容复制到剪贴板。
框：第n个子（3）{
Webkit框阴影：3px 3px 0 5px # f3d42e；
-moz盒阴影：3px 3px 0 5px # f3d42e；
盒子的影子：3px 3px 0 5px # f3d42e；
}

位移的距离将被添加到距离，所以如果值为负值，阴影的范围将减小。
扩散部分也具有模糊效应。
CSS代码将内容复制到剪贴板。
框：第n个子（4）{
Webkit框阴影：3px 3px 5px 5px # f3d42e；
-moz盒阴影：3px 3px 5px 5px # f3d42e；
盒子的影子：3px 3px 5px 5px # f3d42e；
}

如果位移距离没有设置，则模糊效应将直接从块中暴露出来。
CSS代码将内容复制到剪贴板。
框：第n个子（5）{
Webkit框阴影：00 15px # f3d42e；
-moz盒阴影：00 15px # f3d42e；
盒子的影子：00 15px # f3d42e；
}

加扩散距离：
CSS代码将内容复制到剪贴板。
框：第n个子（6）{
Webkit框阴影：00 15px 5px # f3d42e；
-moz盒阴影：00 15px 5px # f3d42e；
盒子的影子：00 15px 5px # f3d42e；
}

此外，如果将插入参数添加到使用中，则最初显示在块外部的阴影效应将成为内部阴影的效果。
CSS代码将内容复制到剪贴板。
框：第n个子（7）{
Webkit框阴影：3px 3px # f3d42e插图；
-moz盒阴影：3px 3px # f3d42e插图；
盒子的影子：3px 3px # f3d42e插图；
}

你注意到了吗最初的位移距离是正的或右下的或偏移的，但因为插入参数被添加，所以效果是相反的：
增加模糊半径和扩散距离：
CSS代码将内容复制到剪贴板。
框：第n个子（8）{
Webkit框阴影：3px 3px 5px 5px # f3d42e插图；
-moz盒阴影：3px 3px 5px 5px # f3d42e插图；
盒子的影子：3px 3px 5px 5px # f3d42e插图；
}

在元素上添加多组阴影：

CSS代码将内容复制到剪贴板。
框：第n个子（9）{
Webkit框阴影：13px 13px # f3d42e，- 10px 10px # 33d42e，- 5px - 10px # ff0d2d，10px - 8px；
-moz盒阴影：13px 13px # f3d42e，- 10px 10px # 33d42e，- 5px - 10px # ff0d2d，10px - 8px；
盒子的影子：13px 13px # f3d42e，- 10px 10px # 33d42e，- 5px - 10px # ff0d2d，10px - 8px；
}

影子的层次关系越高，集合类就越高。
当您熟悉Box阴影的使用时，您可以简单快速地将多种元素添加到边框的设计意义上！