CSS元素重叠并交织在一起的视觉效果

在本文中，我们将使用CSS创建两个元素重叠并交织在一起的视觉效果。例如这样：

实现一：

<div class="wrap">
	<img src="images/nje828re.jpg">
	<div class="rotatedBorder1"></div>
	<div class="rotatedBorder2"></div>
</div>

.wrap{
	position:relative;
	margin:100px auto 0;
}

.wrap,.wrap img{
	width:300px;
	height:300px;
}

.wrap img,.rotatedBorder1,.rotatedBorder2{
	position:absolute;
	height:100%;
	width:100%;
}

.rotatedBorder1{
	z-index: 5;
	border-top: 10px solid #f00;
	border-bottom: 10px solid #f00;
}

.rotatedBorder2{
	z-index: 100;
	border-left: 10px solid red;
	border-right: 10px solid red;
}

.rotatedBorder1,.rotatedBorder2 {
	box-sizing: border-box;
	transform: rotate(45deg);
}

.wrap img{box-shadow: 0 0 20px #bac3c3; z-index:50;}

使用相对定位、绝对定位、z-index实现。

实现二：

<div class="wrap">
	<img src="images/nje828re.jpg">
</div>

.wrap{
	position:relative;
	margin:100px auto 0;	
}

.wrap,.wrap img{
	width:300px;
	height:300px;
}

.wrap img{
	position:relative;
	box-shadow: 0 0 20px #bac3c3;
}

.wrap:before,
.wrap:after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	border-top: 15px #eb311f solid;
	border-bottom: 15px #eb311f solid;
	box-sizing: border-box;
	filter:drop-shadow(0 0 10px #eb311f);
	transition: 2s ease-in-out;
}

.wrap:before {
	transform:rotate(-45deg);
	z-index:-1;
}
.wrap:after {
	transform:rotate(45deg);
	z-index:1;
}

/* 添加旋转效果 */
.wrap:hover:before {
	transform: rotate(315deg);
}
.wrap:hover:after {
	transform: rotate(405deg);
}

边框利用:after、:before伪元素实现，并可以添加旋转效果。