css3新特性
元素倒影
box-reflect:
below | above | left | right 0/距离
注意兼容性处理
css3渐变绘图
rgb(100,200,120);
transparent 类似rgba(0,0,0,0)
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)
-webkit-box-reflect:right 5px -webkit-gradient
(linear,left top,left bottom,from(transparent),to(rgba(250,250,250,1)));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:400px;
height:300px;
background:url(http://img4.imgtn.bdimg.com/it/u=1761250919,1896060533&fm=26&gp=0.jpg) no-repeat;
background-size: 100%,100%;
/*倒影*/
/*-webkit-box-reflect:right 5px;*/
-webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.1)),to(rgba(250,250,250,1)));
}
</style>
</head>
<body>
<div></div>
</body>
</html>