99在《CSS3质感分析——表面线性渐变》主要介绍了CSS3中渐变对设计的影响。今天99为大家接着介绍有关于光源对设计上的影响，详细的请继续往下阅读：
css3质感系列会详细分析网上流行的css3的一些质感效果，让大家不再恐惧Css3，最终可以见到一张图片就可以构思出他的css3实现！
注：文章中主要用的工具：markman 标注神器。 hypersnap7 截图工具，新版本已经好用到极点了 chrome developer 也就是chrome的F12 FB弱爆了..
css3在线渐变http://www.colorzilla.com/gradient-editor/
css3 http://www.css3maker.com/
今天主要讲解以下效果：
金属盒子阴影
盒子阴影是非常常见的质感效果，实现方法也比较多。在这里介绍两种常用的方法：边框+box-shadow Y轴阴影法。
首先复习下box-shadow:
box-shadow的四个参数：x-offset（x轴偏移）、y-offset（y轴偏移）、blur （模糊值）、color of shadow（阴影颜色）和sqaure (阴影扩展半径)。
详细的介绍可以参阅：《CSS3 box-shadow》一文
要写类似效果，这个需要熟练背诵的。首先我们建立一个盒子：
.box{
width:100px;
height:100px;
background-color: #3BB3E0;
border-radius:5px;
border:1px solid #000;
}
拿到一个带边框的盒子。注意，我们要记录下盒子内部的颜色跟大背景颜色。两者缺一不可！！
之后，我们利用 box-shadow的多重设置功能，配合Y轴，设置上边的内侧阴影，及下边的外侧阴影
box-shadow: inset 0px 1px 0px #96E4FF, 0px 1px 0px #696363;
注意，第一个inset的颜色要浅于内部盒子的颜色。第二个外层阴影也要浅于外层背景的颜色。注意我把 Y轴设置为1px，其他参数都不要设置。（其实设置了也没啥不好的，会造成干扰，但是可能会得到意想不到的效果。）
效果不解释了。。
再找个栗子。。。
其实等于
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14),0 1px 1px rgba(255, 255, 255, 0.15);
你可能要问，卧槽，0.14跟0.15是尼玛啥啊。。。其实是唬人的东西，其实就是个白色，这样调节可以透明度降低，变相等于把颜色调浅了。不信，我们改成1
是不是比他以前写的更加碉堡了！！所以，不要迷信代码，要理解自己写出来的东西。
第二种更加简单一些。
可以先思考下怎么做的。。。。。。
这下明白了吧。。。代码不用解释了，哈哈。。
border-bottom: 1px solid #333; border-left: 1px solid black; border-right: 1px solid #333; border-top: 1px solid black;
再来几个，大家可以体会下
border-bottom: 1px solid black; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.13),inset 0 1px 0 rgba(255, 255, 255, 0.13);
注意最外层的圆角边框是属于父级的。 最内层也不要被 0.13之类的值忽悠了。
实质还是:黑色边框+Y轴的box-shadow 内外层叠加
再来个例子
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px white;
99在上面简单明了的为大家介绍了一些有关于光源对设计的影响，不知道大家理解了多少。个人建议，要想掌握真功夫，还得下多下苦功夫。只有自己动手一试才知道是怎么回事。
特别注明一下，上面使用的例子，大家可以参考：W3cplus的案例。
有关于“牌匾与盒子”方面介绍，99就为大空介绍到这里，期待他的下回讲解。再次感谢99给我们带来这么好的心得分享。
如需转载烦请注明出处：http://www.w3cplus.com/css3/surface-linear-gradient-with-css3-part2.html 同时注明作者：http://99jty.com/?p=781