时间:2018-06-27 13:06:29
利用边框阴影（box-shadow），可以制作出光晕、浮雕等原来只有依赖P图才能完成的效果。ie6~ie8都不支持边框阴影（box-shadow），ie9+Firefox4，Chrome，Opera及Safari5.1.1支持边框阴影属性（box-shadow），在边框阴影（box-shadow）的基本语法中，参数inset是可选可不选的，选参数inset，将外部阴影改为内部阴影；而不选参数inset，即默认情况下是外部阴影的。
css阴影——如何用CSS实现DIV块的阴影效果
可以用CSS3的阴影属性。不过要支持IE6的话，加载个.htc行为文件就好了。border:1pxsolid#696;padding:60px0;text-align:center;width:200px;-webkit-box-shadow:#6660px0px10px;-moz-box-shadow:#6660px0px10px;box-shadow:#6660px0px10px;background:#EEFF99;behavior:url(/PIE.htc)。
直接使用box-shadow:5px5px10pxblackinset;属性设置样式样式就可以了。前两个值（5px5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。
这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。<title>盒子阴影的CSS实现方法</title>
box-shadow单边阴影写法
语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;
(box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色内部阴影;)
水平阴影、垂直阴影值必填，其余值可选；
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>css3属性</title>
<styletype=”text/css”>
div.a{
width:200px;
height:200px;
margin:20pxauto;
border:1pxsolid#CCCCCC;
box-shadow:10px20px10px10px#f00;
}
</style>
</head>
<body>
<divclass=”a”></div>
</body>
</html>
水平阴影可以理解为偏左右哪个方向，如果加入inset，正数偏左，负数偏右，如果没有inset，正数偏右，负数偏左；
垂直阴影可以理解为偏上下哪个方向，如果加入inset，正数偏上，负数偏下，，如果没有inset，正数偏下，负数偏上；
总之，inset属性让水平、垂直阴影的方向与没有inset时相反。
如果只要实现单侧阴影，就得牺牲掉模糊效果，因为一旦模糊，颜色会扩散，效果会不明显。因为阴影从本质上来说是一个颜色块。0-10px00设置上方单边阴影；10px000设置右侧单边阴影。
用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。但是如果要求三角形边缘具有阴影效果，这样一来以前的实现方式显然是不行，因为box-shadow属性对border内部的边缘是没有效果的。如果大家还想了解更多与之有关的信息，欢迎关注我们文军营销的官网。
推荐阅读
400-685-0732(7x24小时)
关注文军
