,欢迎光临!
您当前位置:网站首页 >> 网络编程 >> 网页设计 >> CSS >> 利用相对定位制作简单的阴影效果 CSS

利用相对定位制作简单的阴影效果 CSS

2013-07-18 21:58:43 来源:旭日站长 浏览:92

动态搞笑图片  每日一笑话,快乐一辈子

利用相对定位制作简单的阴影效果 :

  原理是在img元素外套一个外围容器,将外围容器的背景设置为灰色,作为img元素的阴影,同时不设置填充边界等值使外围容器和图片一样大,这时图像就正好把外围容器的背景完全覆盖。再设置图像相对于原来的位置往左上方偏移几个像素,这样图像的右下方就露出了阴影盒子右边和下边部分的背景,看起来就是img元素的阴影了.


img {
 padding: 6px;
 border: 1px solid #465B68;
 background-color: #fff;
 position: relative;
 left: -5px;
 top: -5px; 
}
div.shadow {
 background-color: #CCCCCC;
 float:left;
}
<div class="shadow"><img src="works.jpg" width="150" height="140" /></div>

截图


发表评论
网名:
评论:
验证:
共有0人对本文发表评论查看所有评论(网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
关于本站 - 联系我们 - 本站热点 - 会员中心 - 下载首页 - 版权声明
powered by 旭日软件(http://www.webmaster5u.com) 。
威尼斯人官网,旭日软件园-提供免费小软件下载,电脑教程和QQ表情包下载为主要宗旨.同时有网站运营,编程教程,网页特效,手机教程,游戏攻略和IT资讯等内容,打造常用软件下载、内容丰富的站长学习!