鼠标滑过，图片出现这种效果，白色边框带缺口并写上more字样，怎么实现
1 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
我的思路是将它分割成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>
- 1 回答
- 1 关注
- 2053 浏览
添加回答
举报
0/150
提交
取消