带缺口的边框怎么做
鼠标滑过，图片出现这种效果，白色边框带缺口并写上more字样，怎么实现
艳妮子Yeah浏览 2047回答 1
1回答
-
stone310
我的思路是将它分割成4个部分，再用一个整体包着，具体代码写了下，希望对你有帮助<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0} #box{top:100px;left:100px;position:absolute;width:200px;height:200px;} #top{ width:200px;height:140px;border:1px solid black;border-bottom-color: transparent; } #middlel{ width:150px;height:20px;border-left: 1px solid black; } #middler{ width:50px;height:20px;border-bottom:1px solid black;position:absolute;left:152px;top:142px; } #bottom{ width:200px;height:40px;border:1px solid black;border-top-color: transparent; } #text{ padding-left:30px; } </style> </head> <body> <div id="box"> <div id="top"></div> <div id="middlel"></div> <div id="middler"> <span id="text">More>></span> </div> <div id="bottom"></div> </div> </body> </html>
随时随地看视频慕课网APP
相关分类
CSS3