Question

DIV+CSS 兼容各个浏览器的阴影效果 献丑

日前在项目中，遇到DIV样式问题，图片啊，滤镜之类的，都不方便，于是自己写了一个通用的CSS+DIV纯代码实现的阴影效果，兼容各个浏览器，代码如下，希望能给遇见问题的朋友有所帮助，同时，多交流好的方法：

<div>
<div style="position:relative;left:5px;top:5px;background-color:#d2e3d8; ">
<div style="position:relative;left:-5px;top:-5px;border-right:1px #666 solid;border-bottom:1px #666 solid;">
<div style="position:relative;background-color:#ebeef7;border-left:1px #666 solid;border-top:1px #666 solid;">
1tttttttttttttttttt<br />
1tttttttttttttttttt<br />
1tttttttttttttttttt<br />
1tttttttttttttttttt<br />
1tttttttttttttttttt<br />
1tttttttttttttttttt<br />
</div>
</div>
</div>
</div>
注：最外次DIV主要用于布局，里面3个DIV才是关键的代码实现。

Answer 1

建议你还是使坦伍扰用让旦图片来制作阴影效果，布局上可以使用table做外部框架，把阴影设置于外部，内部主要内容部分用背景色就行了，图片中半透明部分只需要切成png格式即可，切图效果如下：

用table布局比较方便，不容易出错，用纯div布局也是可以的，可以根据上图中几个切图布局嵌套，首先把左上角图片作为背景设置居左并设置橘乎padding-left:图片的宽度，然后在这个div内加一个div，这个div再设右上角图片居右并设置padding-right:图片的宽度，最后在这个div内再嵌套一个div设置上面的图片横向平铺，设置一下高度即可完成上部的阴影，中间和下方的阴影方法也差不多，我大概写一下div布局及代码好了，如下：

<div>
 <div style=" background:url(左上角图片) left bottom no-repeat; padding-left:15px;">
  <div style=" background:url(右上角图片) right bottom no-repeat; padding-right:15px;">
   <div style=" background:url(上方图片) 0 bottom repeat-x; height:18px;"></div>
  </div>
 </div>
 <div style=" background:url(左上角图片) left 0 repeat-y; padding-left:15px;">
  <div style=" background:url(右上角图片) right 0 repeat-y; padding-right:15px;">
   <div style=" background:white;">内容</div>
  </div>
 </div>
 <div style=" background:url(左下角图片) left top no-repeat; padding-left:15px;">
  <div style=" background:url(右下角图片) right top no-repeat; padding-right:15px;">
   <div style=" background:url(下方图片) 0 top repeat-x; height:25px;"></div>
  </div>
 </div>
</div>

 

注：IE6无法兼容png透明效果，我百度空间有解决该问题的文章，你可以去看看 

 

时间有限，只能打这些字了，还得忙工作

追问

不可否认，你这样实现的效果是很漂亮，但代码量太多，虽然我们项目现在采用的是table来实现。我就是想寻找一种简单的方法。

Answer 2

勇气可嘉啊。
文档还是要注意结构层次的，至肆历棚少也要样式结构分离啊兄弟。
可以用JS为每个需要你这种的阴影效果的内容套3个烂信div，也不敢直接写在文档中，让后面裂则看的人情何以堪啊

追问

把他的样式独立出来，直接
内容区
这样写在文档不便阅读？你让1楼情何以堪！

Answer 3

用css3多方便…………

追问

CSS3自己玩玩可以，做项目，基本IE6、7、8系列，很多不兼容，网上一搜，全是CSS3代码，目前还不通用，适合FF、CHROME。
暂不考虑。