css3 box-shadow阴影(外阴影与外发光)

css3 box-shadow阴影(外阴影与外发光)

测试1： <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div> box-shadow: 0 0 10px #f00 （因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用 半径范围，颜色）

测试2： <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值（正值 向右 向下） 所以变成了这样?

测试3：<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值（负值 向左 向上） 所以变成了这样?

同理：你可以测试下一正值，一负值的效果，这里就不做测试了。。。。。。。。

测试4：<div style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>

你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小，（用逗号隔开）多练习几次就好

测试5：--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

p.al-p, .al-body p {
font-family: 微软雅黑, "Microsoft YaHei", 黑体, Arial;
font-size: 12pt;
line-height: 20pt;
margin: 15px 0px;
}

#cnblogs_post_body h2 {
font-size: 21px;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
}
<style>…</style>
.postBody h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
background-color: rgb(1, 152, 117);
color: rgb(255, 255, 255);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
margin: 15px auto 2px;
border-radius: 3px;
}
.postBody h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 15px auto 2px auto;
}

#MySignature {
background-color: #f8f8ee;
border: solid 1px #e8e7d0;
box-shadow: 0 0 15px #ff1493;
padding: 10px;
margin-bottom: 10px;
color: gray;
}

<div id="MySignature" style="display: block;"><div style="padding: 5px 5px 5px 10px">作者：<a href="http://www.cnblogs.com/" target="_blank">2222222</a><br>
出处：<a href="http://www.cnblogs.com/" target="_blank">http://www.cnblogs.com/</a><br>
个人博客：<a href="http://zhanjindong.com/" target="_blank">http://zhanjindong.com</a><br>
关于：一个程序员而已<br>
说明：目前的技术水平有限，博客定位于学习心得和总结。 </div></div>