鼠標滑過，圖片出現這種效果，白色邊框帶缺口并寫上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>
-
艷妮子Yeah非常感謝?。。?/div>
- 1 回答
- 1 關注
- 2110 瀏覽
添加回答
舉報
0/150
提交
取消