css3：box-shadow边框阴影属性值详解_html/css_WEB-ITnose

前言

本来之前的东西都是直接放在U盘的，但是怎奈，昨晚下班U盘拿回家的时候发现USB接口那里的卡槽里面那个磁条居然掉了。。so之前10月份做的东西都不见了。。这篇文章也是其中的受害者之一。所以以后还是不图方便了，东西全部放电脑上比较稳妥。

css3边框属性最后一课：box-shadow边框阴影效果。从英文字面上的意思的理解其实，这个属性并不是边框阴影，而是css模型边框阴影。但是copy to China总要符合我们的阅读习惯，css中最重要最根本的就是围绕盒子模型来说。每一个元素就是一个盒子，每一个盒子都有一条看不见的边框 border ，假如你想要边框内部或者外部产生一种朦胧的阴影效果，不管是你用什么属性，但是总会碰到这个 box-shadow 属性

为了更方便的学习，我把所有的css边框属性列在下面，学不学习由你吧

，仅供参考：

border-image边框图像

border-radius圆角边框

-moz-border-*-colors专属Firefox

昨晚我在想一个问题，就是为什么网上有这么多的教程，随便一个小白上去就是搜就是打一把，但是为什么我还要自己再重新码一次，这不是典型的杨白劳么？我思考了一下，突然又豁然开朗了，为什么？因为我觉得只有自己亲身动手静下心来去分析和学习，那比自己看了一次两次三次甚至是无数次要强一百倍。实践是检验真理的唯一标准，没有动手过，说多了也是白说，因为我听前辈说，他说，他说，他还说，就只有他说，而你自己呢？有没有仔细去分析这个他说的过程是否合理，是否正确，不得而知。所以，我只是不想成为别人思想的传播者而已。

学习总是一个无聊的过程，我们在学习中不仅仅只是为了提高我们的薪酬，更重要地是对自己负责，人生没几年，过了就真的什么都没有。国庆回家听到初中一个同学因为嗑药自杀了，感叹生命脆弱的同时，更深知知道时间是多么宝贵。

牢骚发完了，那么现在进入到正题。

box-shadow规范

box-shadow定义一个盒子外部或内部的阴影效果。可以用一个或者多个阴影都装饰盒子，不过要用“,”来区分。下面是w3c 规范

属性名:	box-shadow
属性值:	none | [inset? && [ ? ? ? ] ]*
初始值:	none
应用于:	所有元素
继承性:	无
百分比:	N/A
计算值:

属性值详解：

1、inset

可选值，默认阴影在盒子外

使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。

2、

这是头两个 值，用来设置阴影偏移量。offset-x为设置阴影的水平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的，如下图：

我们的水平原点是以边框的左上角为起始点，x为水平位移，Y为垂直位移。据说楼下有demo↓

3、

指定模糊半径，

不允许负值

，假如设置为0，则阴影不模糊，否则设置越大的值，边框阴影就越模糊。听说楼下有demo↓

4、

指定阴影拓展，假如设置为0，不拓展，正值阴影扩大，负值缩小。听说楼下有demo↓

各个值的不同写法，demo如下

统一规范，边框和宽度做了通用写法

width:200px;height:50px; border:10px solid #F00;margin:25px;语法如下：inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]*

10px 10px #CCC，两个值

-10px 10px #CCC，水平位移为负值

10px -10px #CCC，垂直位移为负值

10px 10px 0 #CCC，模糊半径为0，该值不能为 负值

10px 10px 10px #CCC，模糊半径为10像素

10px 10px 0 10px #CCC，拓展值为正，阴影向外拓展10px

10px 10px 0 -5px #CCC，拓展值为负，阴影向内收缩。

inset 10px 10px 10px 10px #CCC，使用inset

10px 10px 0 10px #CCC

10px 10px 10px 20px #CCC

多个阴影

跟PS关系

有人会说这跟PS有一地鸡毛关系。。

额。。。这个还真的有点鸡毛关系。怎么说呢，我们都知道PS都有一个图层投影效果功能，在PS图层下方有一个如下：

点击投影会弹出一个投影的设置框

这样其实我们看不出他们的关系具体是怎样，那么我们可以换个英文版本的PS就知道了其中的奥妙了

假如你不小心有看过W3C的 规范 ，那么你就会对图片中的distance，spread和size这些英文有点熟悉。

并且你用PS做过类似长投影效果：

那么，我相信，你是对投影中这些设置是有所了解的。没错，ps中投影设置中的distance就是css语法中的 ，代表水平位移和垂直位移，spread是语法中的 拓展大小，而size是就是模糊半径

但是经过我分析，其实ps里面的spread拓展大小是size大小影响，假如说模糊半径size为0，那么在PS中设置任何的拓展是没有任何作用的，如图：

但是对于css来说却是不一样的，比如下面这个代码：

10px 10px 0 10px #333，水平和垂直位移10px，模糊半径0，拓展10px

就算模糊半径的值为0，但是假如有指定一个拓展大小，那么这个拓展阴影就会沿着本来的阴影向四周向外拓展相应指定数值大小。

在PS当中的拓展大小是在模糊半径基础之上的拓展，拓展有点双倍模糊的感觉，而css则是根据盒子的外边框拓展，它是针对边框的距离而言，假如我们射击湿在设计稿中使用拓展和模糊半径，那我们在写css的时候可以减小一倍的拓展来达到效果的相似，比如设计稿是

那么我们的css值应该是： 10px 10px 10px 0

左图为设计稿，右图为css图

这是效果图

至于angle（角度），我所了解的是这样，为了更好了解这个角度，我们可以用一天的太阳位置来做一个比喻，毕竟太阳出来了，就自然会有投影囖。

PS中0°角，此时太阳光刚从海平面冒出，投影在我们人影后面，此时投影水平位移offset-x为负，offset-y为0；

PS中45°角，此时太阳刚升到早上9点钟方向，投影还是在我们背后地面上，此时投影水平位移offset-x为负，垂直位移offset-y为正;

PS中90°角，此时太阳正高头照，投影在我们脚底上，此时投影水平位移offset-x：0，垂直位移offse-y为正；

PS中135°角，此时太阳在下午3点钟方向，投影在人前方的地上，此时投影就是shadow的原点，即水平位移 offset-x：0，垂直位移为offset-y：0；

PS中180°角，此时太阳已经落山，跟刚升起的正好是反方向，投影在人的正前方，尽管即使我们可能看不见，此时投影水位位移offset-x为正，垂直位移offset-y：0；

太阳落山之后，我们还是用灯来比作太阳吧。

PS中225°角，此时灯光从西南方向照射我们，投影在东北方向上，此时水平位移offset-x为正，垂直位移offset-y为负；

PS中270°角，此时灯光从正南方向照射，投影在正北方向，投影水平位移为0，垂直位移为负；

PS中315°角，此时灯光从东南方向照射，投影在西北方向，投影水平位移为负，垂直位移为负；

图片中灰色的左上角就是shadow的原点，假如你一下子想不起来到底是使用负值还是正值，那么你可以把css3中的 box-shadow 比作一个发光源，然后根据其投影位置来判断其是从哪里照射的。

应用

当我们拿到设计稿的时候，看见设计稿中有用投影的。假如我们不明白css用什么数值来写的话，那么可以直接在设计稿上看相关的投影设置，就明白当时射击湿是用什么数值来做设计，比如下面就是这样的设计稿

假如你只是单纯的会用 box-shadow来做一些阴影效果，但是不明白其值具体是代表什么懂得话，那看见设计稿的时候只能以大概的数值去写的话，那射击湿后面说，干嘛这个投影这么大，我设计稿可没有这么大哦。所以你又要去一个个调，何不如直接从一开始就让射击湿无言以对呢，那么我们可以它的投影数值，如下：

从图片中可以看见PS投影的各项数值看出，其水平位移 offset-x：0，垂直位移offset-y：0，模糊半径5px，拓展大小为5px，颜色为#555，根据上面我们得出，在写css时，拓展大小减少一倍的原理，那么css代码就应该为 0 0 5px 0 #555 左图为原图，右图为css图

so，你学会了么？

后话

哈，边框属性终于完了，貌似时间学习时间有点久。一步一个脚印吧。。那么就先到这里了，额，忘记说明移动端了。。目前我的5S，IOS8一切正常。假如你的手机系统看不到上面这些小demo有阴影效果，那么请在评论中说出来，对了，上面我没有加任何-moz，-o-等私有前缀。

参考资料：

http://www.w3.org/TR/css3-background/#the-border-radius

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius