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 */
更新时间:2019-08-29 00:08:29
实现思路
将四个边框分别看做四个盒子,宽度等于该盒子的边框的宽度,在进行定位。
通过调用animate动画让边框动态显示。