CSS 实现让div的四个边框都有阴影的效果：
首先：
HTML代码
<h1>CSS 如何实现让div的四个边框都有阴影的效果？</h1>
<div class="g1">
<div class="g2"></div>
</div>
CSS代码body{background:#f00}
html{background:#f00}/*html加背景色*/
.g1{
width:500px
height:500px
border:2px solid #fff
margin:30px auto
background-color:#fff
box-sizing:border-box
}
.g2{
width:400px
height:400px
margin:50px auto
border:2px solid #000
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000
}
具体效果：
借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下（鼠标hover）：
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
扩展资料：mozilla 使用 CSS transitions
可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法
