3D效果？

1.去掉图片下边距

img{

 display:block;

}或

img{

 vertical-align:middle;

}

2.3D效果实现？

给父盒子设置perspective:800px;

中心盒子：transform-style:preserve-3d;

3.设置盒子阴影？

扫描二维码关注公众号，回复： 1488229 查看本文章

position:absolute;

box-shadow:0 0 8px red;

4.给图片添加倒影？

img{

/* 方位值  间隔 渐变色*/

线性渐变

 -webkit-box-reflect:below 5px -webkit-linear-gradient(top, rgba(0,0,0,0)  30% ,rgba（0，0，0,.5） 100%);

}

5.从中间开始渐变？

.sence p{

 width:700px;

height:700px;

径向渐变

background:-webkit-radial-gradient(center, 350px 350px,rgba(244,23,234,.2));

}

6.颜色渐变

线性渐变：linear-gradient(起点/角度， 颜色 位置, ...)

      起点:left/top/right/bottom/left top...默认top

     角度: 逆时针方向  0-360度

颜色位置: red 50%,blue 100%;

径向渐变: radial-gradient(起点(圆心位置)， 形状/半径/大小， 颜色1，颜色2)

起点：left/top/right/bottom或具体值/百分比

形状：ellipse(椭圆) ，circle(正圆)

大小：具体数值或百分比， 也可以是关键字：close-slide(最近端) ，closest-corner(最近角),...

7.css3盒模型倒影

box-reflect倒影

方向：above/below/left/right

距离

渐变