Html
    Css
    Js
li {
	list-style:none;
}
* {
	margin:0;
	padding:0;
}
.remen {
	height:250px;
}
.remen h1 {
	height:60px;
}
.remen ul {
	height:180px;
}
.remen ul li {
	float:left;
	height:80px;
	width:160px;
	line-height:80px;
	text-align:center;
	border:1px solid #CCCCCC;
	margin:0 5px;
	margin-top:10px;
	position:relative;
}
.remen ul li .jia {
	display:none;
	position:absolute;
	width:0px;
	height:2px;
	top:-2px;
	left:0;
	background:#000000;
}
.remen ul li .wb {
	display:none;
	position:absolute;
	width:0px;
	height:2px;
	bottom:-2px;
	left:0;
	background:#000000;
}
.remen ul li .hl {
	display:none;
	position:absolute;
	width:2px;
	height:5px;
	bottom:0;
	left:0px;
	background:#000000;
}
.remen ul li .hr {
	display:none;
	position:absolute;
	width:2px;
	height:5px;
	bottom:0;
	right:0px;
	background:#000000;
}
.remen ul li a {
	line-height:80px;
	text-align:center;
	font-size:18px;
	font-weight:600;
	display:none;
	color:#B28247;
}
.remen ul li .bd {
	position:absolute;
	height:30px;
	top:15px;
	left:0;
}
.remen ul li .bd img {
	width:70%;
}
/*# sourceMappingURL=2.css.map */

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

四条边框动态加载

更新时间:2019-08-29 00:08:29

实现思路
将四个边框分别看做四个盒子,宽度等于该盒子的边框的宽度,在进行定位。
通过调用animate动画让边框动态显示。

0