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

html-css012

DIV+CSS 兼容各个浏览器的阴影效果 献丑,第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透明效果,我百度空间有解决该问题的文章,你可以去看看

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

box-shadow:none|shadow

它的值包括 6 个参数:阴影类型,X轴位移,Y轴位移,阴影大小,阴影扩展和阴影颜色。此 6 个参数可以有选择地省略。

浏览器兼容性

Webkit支持:-webkit-box-shadow

Mozilla支持:-moz-box-shadow

IE9支持:box-shadow

IE8及以前:不支持

实用实例

简单效果:

img{

height:300px

-moz-box-shadow:5px 5px

-webkit-box-shadow:5px 5px

box-shadow:5px 5px

}

虚阴影效果:

img{

height:300px

-moz-box-shadow:2px 2px 10px #06c

-webkit-box-shadow:2px 2px 10px #06c

box-shadow:2px 2px 10px #06c

}

渐变阴影效果:

img{

height:300px

-moz-box-shadow:0 0 10px #06c

-webkit-box-shadow:0 0 10px #06c

box-shadow:0 0 10px #06c

}

带光晕效果

img{

height:300px

-moz-box-shadow:0 0 10px 10px #06c

-webkit-box-shadow:0 0 10px 10px #06c

box-shadow:0 0 10px 10px #06c

}

内阴影效果

img{

height:300px

-moz-box-shadow:inset 5px 5px 10px #06c

-webkit-box-shadow: inset 5px 5px 10px #06c

box-shadow: inset 5px 5px 10px #06c

}

彩色阴影

img{

height:300px

-moz-box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green

-webkit-box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green

box-shadow:0 0 10px red,

2px 2px 10px 10px yellow,

4px 4px 12px 12px green

}