CSS3盒阴影 box-shadow

HTML5学堂：CSS3 的 box-shadow 有点类似于 text-shadow，只不过不同的是 text-shadow 是对象的文本设置阴影，在移动端我可以使用盒阴影来代替边框的效果，而 box-shadow 是给对象实现图层阴影效果。谢谢~~

CSS3阴影种类

可以分文字阴影和盒模型阴影。而本章主要讲的是盒阴影 (box-shadow)，盒阴影与文本阴影一样，都可以代替具有阴影效果的图片，减少对服务器的请求压力！而使用方面来说，CSS3 的 box-shadow 有点类似于 text-shadow，只不过不同的是 text-shadow 是对象的文本设置阴影，而 box-shadow 是给对象实现图层阴影效果。当然我们有时候会用盒阴影来代替边框，这是因为盒阴影是不占物理空间的，而边框会，导致了移动端设置自适应宽度受到了影响，那么接下来我们来看看盒阴影的使用！

欢迎沟通交流~HTML5学堂

盒阴影

box-shadow基本语法：

box-shadow：none|shadow[,shadow]*

shadow=length{2,4}&&color?

默认值：none

语法分析：

none：无阴影

第1个长度值：阴影水平偏移值。可为负值

第2个长度值：阴影垂直偏移值。可为负值

第3个长度值：可选，阴影模糊值。不允许负值

第4个长度值：可选，阴影外延值。不允许负值

color：设置对象的阴影的颜色。可以使用16进制颜色值，也可以使用英文单词，还可以采用rgba的表示法。

语法符号含义：

语法符号含义：

“[]”代表“可选”

“|”代表“或”

“{}”里的数字代表属性值的数量范围

“？”代表“一次”

“*”表示可出现多次

CSS3盒阴影 应用

我们可以通过盒阴影制作漂亮的按钮效果。接下来我们就来举几个例子，实战一下~

结构代码：

1. <div class="h5course">欢迎沟通交流~HTML5学堂</div>

升高元素：

样式代码：

1. .h5course {
2.     width: 500px;
3.     padding: 30px;
4.     background: #333;
5.     color: #fff;
6.     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 
7.                 0 1px 4px rgba(0, 0, 0, 0.3), 
8.                 0 0 60px rgba(0, 0, 0, 0.1) inset;
9.     font-size: 40px;
10.     font-weight: bold;
11.     font-family: "微软雅黑";
12. }    

升高元素具有的效果就是让人感觉立体的，而且给人一个错觉，跟背景不是同一层面上。通常此效果可以用在按钮没被点击的效果上。同时要注意在使用多层次的阴影时还需注意一个细节问题，如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。

内嵌效果:

样式代码：

1. .h5course {
2.     position: relative;
3.     width: 500px;
4.     padding: 30px;
5.     background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), 
6.                 color-stop(1, rgb(62,184,229)) );
7.     color: #fff;
8.     border-radius: 10px;
9.     box-shadow: inset 0px 0px 6px 3px #666;
10.     font-size: 40px;
11.     font-weight: bold;
12.     font-family: "微软雅黑";
13.     cursor: pointer;
14. }

内阴影效果其实运用于凹陷的效果，一般来说，如果有一个效果设置凸显样式，通过点击实现凹陷的效果，那么点击鼠标的动作非常有质感。是一种按钮常用的方法，接下来我们看如何实现按钮的一些点击效果~

欢迎沟通交流~HTML5学堂

按钮效果:

样式代码：

1. .h5course {
2.     position: relative;
3.     width: 500px;
4.     padding: 30px;
5.     background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) );
6.     color: #fff;
7.     border-radius: 10px;
8.     box-shadow: inset 0px 1px 0px #2ab7ec, 
9.                 0px 5px 0px 0px #156785, 
10.                 0px 10px 5px #999;
11.     font-size: 40px;
12.     font-weight: bold;
13.     font-family: "微软雅黑";
14.     cursor: pointer;
15. }

查看效果：

按钮效果的一个原理就是通过盒阴影升高效果，让元素具有立体感，而通过active 伪类设置位置向下移动，阴影的偏移值和模糊值发生改变，造成点击被按下的感觉。代码如下：

1. .h5course:active {
2.     top: 3px;
3.     box-shadow: inset 0px 1px 0px #2ab7ec, 
4.                  0px 2px 0px 0px #156785,
5.                  0px 5px 3px #999;
6. }

同样的大家可以试着改变不同的偏移值，具有不同的视觉效果~。

兼容性：

IE8以及IE8以下版本浏览器不支持

欢迎沟通交流~HTML5学堂