css3 box-reflect属性

取值：

direction：
above：倒影想上方；
below：倒影在下方；
left：倒影在左边；
right：倒影在右边。
offset：
可用单位：px  百分比
mask-box-image：
none：无遮罩图像
url：使用绝对或相对地址指定遮罩图像；
linear-gradient：使用线性渐变创建遮罩图像；
radial-gradient：使用径向(放射性)渐变创建遮罩图像；
repeating-linear-gradient：使用重复的线性渐变创建背遮罩像；
repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。
示例：
-webkit-box-reflect: below 3px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,.6));

各浏览器兼容支持情况：

案例效果：

<div id="box">
		<img src="http://www.xuanmomo.com/html/img/4.jpg" />
		<img src="http://www.xuanmomo.com/html/img/4.jpg" />
		<img src="http://www.xuanmomo.com/html/img/4.jpg" />
		<img src="http://www.xuanmomo.com/html/img/4.jpg" />
	</div>

body{
			background: #ccc;
		}
		#box{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300px;
			height: 300px;
			margin: -150px 0 0 -150px;
		}
		img{
			position: absolute;
			width: 100px;
			margin: 0 auto;
		}
		img:nth-child(1){
			top: 0;
			left: 100px;
			-webkit-box-reflect: above 3px -webkit-linear-gradient(bottom,transparent,transparent 10%,rgba(255,255,255,.6));
		}
		img:nth-child(2){
			top: 100px;
			left: 0;
			-webkit-box-reflect: left 3px -webkit-linear-gradient(right,transparent,transparent 10%,rgba(255,255,255,.6));
		}
		img:nth-child(3){
			top: 100px;
			right: 0;
			-webkit-box-reflect: right 3px -webkit-linear-gradient(left,transparent,transparent 10%,rgba(255,255,255,.6));
		}
		img:nth-child(4){
			left: 100px;
			bottom: 0;
			-webkit-box-reflect: below 3px -webkit-linear-gradient(transparent,transparent 10%,rgba(255,255,255,.6));
		}

效果：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/441

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！