网页设计简单添加阴影的方法.docx

在网页设计中，为图片添加上阴影是一种非常不错的美化方法， 经常会在设计当中用到。 不 用Photoshop，仅仅只用CSS如何为图片添加上阴影呢？这里有一种非常简单的方法。 下面是原始图片： 这是添加上阴影以后的效果: 如何实现这样的效果呢？其实很简单，下面是全部的代码: html head style type= text/css ”〉 img{ border-top:1px solid #dcd7c8; border-left:1px solid #dcd7c8; border-right:1px solid #dcd7c8; paddi ng:5px 5px 9px 5px; background:url(shad_bottom.png) repeat-x bottom left; } /style /head body img src= flower.jpg alt= flower / /body /html img标签的三个border属性分别是为图片的上面、左边、右边添加三个边框，边框的颜色 要选择和真实的阴影相接近的颜色， 看上去就像是真实的阴影一样。 padding属性在图片的 周围留出了一些空间， 图片的下部留出了 9px的空间以便于之后背景图片的添加， 因为下部 的阴影效果实际上是一个 4px的图片在水平平铺的结果， 所以要留出9px的空间，这样减去 背景图