boxshadow属性可以设置,boxshadow属性可以设置盒子的阴影颜色吗
关于CSS中box-shadow的简单使用
box-shadow就是给盒子、文本的阴影，就像人的影子一样。根据调整其属性进行控制阴影出现的位置，大小，颜色。
box-shadow属性添加一个或者多个阴影。
语法：
box-shadow制作各种单边，多边阴影
box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。 inset 默认阴影在边框外。
参数：
offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。
offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 length 。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或spread-radius 则有模糊效果。
blur-radius模糊半径 值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
spread-radius扩展半径 取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
color 相关事项查看 color 。如果没有指定，则由浏览器决定——通常是 color 的值，不过目前Safari取透明。
使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
spread-radius才是用来控制阴影大小（扩展还是缩小）。如果没有设置扩展半径，那么阴影尺寸与元素大小相同。
效果如下：
只要没有设置扩展半径，阴影实际的大小不改变。blur-radius的值用来控制模糊程度，并不控制阴影的大小。blur-radius就类似于于photoshop中的羽化半径。
扩展半径如果是正的值，阴影扩展，如原来总宽高为44px的元素（包括边框2px），在设置10px扩展半径后，阴影的宽高会变为64px。
扩展半径如果是负的值，阴影收缩，如原来总宽高为44px的元素（包括边框2px），在设置-10px半径后，阴影的宽高会变为24px。
制作单边阴影时候常遇见这样一个情况，明明设置了x,y轴方向的偏移，为什么别的边还是有阴影出现。
如果不想边框左边出现任何绿色阴影，那么我们需要将x方向的偏移量调大一下。
可是元素右边的阴影太多了，如果将x偏移量改小了，左边就会出现阴影。
这种进退维谷的情况让人很奔溃。这其实模糊半径带来的问题，在设置模糊半径的时候（没有设置偏移量和扩展半径），发现元素四周会有阴影（羽化）的效果。
为了解决这个问题我们会不停调整左右的偏移量，其实我们应该调整元素扩展半径，让它变为负值，缩小阴影尺寸。
CSS3属性box-shadow的使用
最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。
语法：
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：
h-shadow代表的是阴影的水平位置偏移量，可以是正负值
即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边
v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值
当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面
blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和
spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。
color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色
默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影
附：
属性定义及使用说明：
box-shadow属性可以设置一个或多个下拉阴影的框。
兼容性：
CSS3边框与圆角
属性：一个最多可指定四个border-*-radius属性的 符合属性 ，这个属性允许你为元素添加圆角边框！
语法：border-radius:1-4 length|% / 1-4length|%
【length可为任意长度单位，比如px、em。
当使用%的时候，相对的不是字体的大小而是对应边的长度的百分比，例如border-top-left-radius:50%，那么左上角的圆角在左边的弧度是边框左边长度的50%、在上边的弧度是边框上边长度的50%；
因此如果设置border-radius:50%，那么边框将会变为一个椭圆】
兼容性：IE9+、Firefox4+，Chrome，Safari5+，Opera
-------------------------------------------------
CSS3指定每个圆角：
多值：
border-radius（四个值）:左上角 右上角 右下角 左下角
border-radius（三个值）:左上角 右上角和左下角 右下角
border-radius（两个值）:左上角和右下角 右上角和左下角
border-radius（一个值）:四个圆角值相同
border-top-left-radius:定义了左上角的弧度
border-top-right-radius:定义了右上角的弧度
border-bottom-left-radius:定义了右下角的弧度
border-bottom-right-radius:定义了左下角的弧度
box-shadow属性：可以设置一个或多个下拉阴影的框
语法：
box-shadow：h-shadow（水平位置偏移量）允许负值。必写；
v-shadow（处置位置偏移量）允许负值。必写；
blur（模糊距离）可选；
spread（阴影尺寸）可选；
color（阴影颜色）可选；
inset（内部阴影）可选；扩展属性，正值缩小，负值增大
box-shadow: 10px（横向，正值往右，负值往左） 10px（纵向，正值往下，负值网上） 10px（模糊，从边框到内容，完成渐变模糊） 10px（扩展，四周边界往外扩展10px） yellow（阴影颜色）
border-image
属性：使用border-image-*属性来构建美丽的可扩展按钮
语法：border-image:source slice width outset repeat；
兼容性：IE不兼容、Firefox、Chrome、Safari6+、Opera不兼容
-------------------------------------------------
border-image-source属性
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
语法
border-image-source：none；
border-image-source：url("...")；
-------------------------------------------------
border-image-slice属性
border-image-slice属性指定图像的边界向内偏移
语法
border-image-slice：number|%|fill；
-------------------------------------------------
border-image-width属性
brder-image-width属性指定图像边界的宽度
语法
border-image-width：number|%|auto；
-------------------------------------------------
border-image-outset属性
border-image-outset用于指定在边框外部绘制border-image-area的量
语法
border-image-outset：length|number；
-------------------------------------------------
border-image-repeat属性
该属性用于图像边界是否重复（repeated）、拉伸（stretched）或铺满（rounded）
语法：border-image-repeat：stretch|repeat|round|initial|inherit；
box-shadow属性四个值是什么?
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
3、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
4、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
设置水平垂直偏移得到阴影效果：
outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。
inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。
CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”
box-shadow：给元素块添加周边阴影效果。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
*还有另一种情况： box-shadow: 0 2px 2px #FECC84
当我们在色值前只写了三个数值的情况下，则第三个值是 blur （模糊距离）。
利用阴影属性，也可以实现外边框的效果：
当我们再为它添加一个 outline （轮廓），就会发现它实现了-边框内圆角：
* 关于为什么会这样：
outline的描边并不会跟着圆角走，因此显示为直角。
所以把这两者叠加到一起，box-shadow 则刚好填补描边与容器圆角之间的空隙。
*值得注意的是，box-shadow 阴影的大小值并不一定等于描边的宽度，它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上，制定一个等于描边宽度的值在某些浏览器中可能会渲染异常，所以，最好是稍小的值。
参考书籍： Lea Verou 《CSS揭秘》