首頁(yè) 猿問(wèn) 帶缺口的邊框怎么做

帶缺口的邊框怎么做

CSS3

艷妮子Yeah 2016-09-06 10:23:58

鼠標(biāo)滑過(guò)，圖片出現(xiàn)這種效果，白色邊框帶缺口并寫(xiě)上more字樣，怎么實(shí)現(xiàn)

查看完整描述

1 回答

已采納

stone310

TA貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

我的思路是將它分割成4個(gè)部分，再用一個(gè)整體包著，具體代碼寫(xiě)了下，希望對(duì)你有幫助

<!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 反對(duì) 回復(fù) 2016-09-07