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
}
具体效果：
如果是给全部的DIV 加同样的背景色的话，你可以这样写： <style type="text/css">div{background:#f00} </style>如果你只是针对你给出代码的一个进行添加背景色： <style type="text/css">.articleWrapper{background:#f00} </style>你的意思是想把你绿的那导航排一排吧!你那个是图片导航吧!代码如下:
<style type="text/css">
.aa{width:180px}
.aa a{display:blockmackground-image:(图片背景地址)width:90pxline-height:30pxfloat:leftcolor:#ff0000}
.aa a:hover{color:#000000}
</style>
<div class="aa">
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
</div>
我也许写到有点子不好哟!
就这样子了,里面的细节你自己去改好!!!!!
