【投影效果】CSS2位移及CSS3属性调整

◇组件名称:

    投影效果

◇功能描述：

    创作图片投影效果。

◇上下文情景：

    图片展示时产生投影效果，则可以调用此控件。

◇工作方式&技术要点

    ·CSS位移投影父容器为一张投影头，图片通过左上位移显示阴影，可以用负边距，也可以用相对偏移。
    ·CSS3有投影属性box-show创建投影。

◇代码展示

1.CSS位移投影

View Code

.img-wrapper {
  background: url(img/shadow.gif) no-repeat bottom right;
    float:left;
    line-height:0;
}

.img-wrapper img {
    background:#fff;
    padding:4px;
    border:1px solid #a9a9a9;
    position:relative;
    left:-5px;
    top:-5px;
}

DEMO：点此打开

2.CSS3投影

View Code

img {
    background:#fff;
    padding:4px;
    border:1px solid #a9a9a9;
}

img {
  -webkit-box-shadow: 3px 3px 6px #666;
  -moz-box-shadow: 3px 3px 6px #666;
  box-shadow: 3px 3px 6px #666;
}

DEMO：点此打开