icss之继承inherit

学习自link
目标为图片添加倒影

1、div{ -webkit-box-reflect: below; }
box-reflect 有四个方向可以选，below | above | left | right 代表下上左右。
2、继承inherit

div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

div {
	margin: 50px auto;
	width: 200px;
	height: 200px;
	background-image: url('http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg');
	position: relative;
}

div:before {
	content: "";
	background-image: inherit;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: -100%;
	transform: rotateX(180deg);
}

我们使用伪元素 background-image: inherit; 继承父元素的背景图，再使用 transform 旋转容器达到反射的效果。