CCS教程之图象应用---阴影的制作

 给图象添加阴影

1、在PHOTO中设计阴影图象跟图片尺寸一样;

2、添加HTML代码

    <div class="img-wrapper"><img src="xx.jpg" width="300"></div>

   //这段代码不能换行写要写在一行上中间不要有空格

3、添加CSS代码

   .img-wrapper{

            background:url(imges/shows.gif) no-repeat bottom right;

            clear:right;

            float:left;

            position:relative;

            }

   .img-wrapper img{

           background-color:#fff;

           border:1px solid #ccee66;

           padding:4px;

           display:block;

           margin:-5px 5px 5px -5px;

           position:relative;

            }

---------------------------------------------------------------------------------------------------

另外一种方法:使用相对定位的技术

    .img-wrapper{

            background:url(imges/shows.gif) no-repeat bottom right;

            line-height:0;

            float:left;           

            }

    .img-wrapper img{

           background-color:#fff;

           border:1px solid #ccee66;

           padding:4px;

           position:relative;

           left:-5px;

           right:-5px;

            }

 

posted @ 2011-01-09 10:44  蓝魔  阅读(221)  评论(0)    收藏  举报