首頁猿問帶缺口的邊框怎么做

帶缺口的邊框怎么做

CSS3

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

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

查看完整描述

1 回答

已采納

stone310

TA貢獻361條經(jīng)驗獲得超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 反對回復 2016-09-07