投影
使用css可以给投影效果很大的灵活性。
简单的css投影:
原理是将一个大的背景图像应用于容器div的背景,然后使用负边距偏移这个图像,从而显示出投影。
<style> .img-wrapper{ background: url(img/shadow.gif) no-repeat bottom right; clear: right; float: left; //因为div是块级元素,背景的投影图会水平伸展,占据所有空间,而我们需要div包围图像,可以显示的设置div的宽度,但这样会限制这种技术的用途 //可以浮动div,让它收缩包围的效果。ie5.x不支持,可以对ie5隐藏样式。 position: relative; //为了兼容ie6 } .img-wrapper img{ margin: 5px 5px 0px -5px; background: #fff; border: 1px solid #a9a9a9; padding: 4px; display: block; //这两个属性为了兼容ie6 position: relative; //同上 } </style> </head> <body> <div class="img-wrapper"> <img src="img/dunstan.jpg" width="300px" height="300px" /> </div> </body>
来自Clagnut的投影方法:
不使用外边距,使用相对定位来偏移图像。
.img-wrapper{
background: url(img/shadow.gif) no-repeat bottom right;
float: left;
line-height: 0;
}
.img-wrapper img{
background: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
position: relative;
left: -5px;
top: -5px;
}
box-shadow:需要四个值,垂直水平偏移,投影的宽度,颜色
.img-wrapper{
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow:3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}
.img-wrapper{
background: url(img/shadow.gif) no-repeat bottom right;
float: left;
line-height: 0;
}
.img-wrapper img{
background: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
position: relative;
left: -5px;
top: -5px;
}
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。