boxshadow单边阴影(boxshadow三边阴影)

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: 0 10px 10px -10px #ccc;

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

用css给div的border设置阴影、只要上、下、左有，右边不要阴影、请问该怎么写？

1、首先新建一个html文件，命名为test.html，使用div标签创建一个模块，用于测试。如下图所示。

2、在test.html文件内，给div添加一个class属性，属性值设置为myway。

3、然后在css标签内，通过class设置div的样式，定义它的宽度为200px，高度为200px，背景颜色为黑色。

4、接着在css标签内，再使用box-shadow属性设置div的阴影效果，其中，左边阴影为绿色，顶部阴影为蓝色，底部阴影为红色，右边阴影为黄色。

5、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。