減小字體
增大字體·上一篇：VB Shell 打開一個程序并獲取句柄
·下一篇：textarea 文本框智能自動提示
純CSS實現尖角提示框效果
沒有使用任何圖片，純CSS實現帶箭頭的提示框效果。方框大小可以自動適應文件長度。
- HTML code運行代碼復制代碼編輯
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <head> <title>純CSS實現尖角提示框效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .rc_box1,.rc_box2,.rc_box3{display:inline-block;*display:inline;*zoom:1;position:relative;border-style:solid;border-color:#ddd;} .rc_box2,.rc_box3{border-width:0 1px;*left:-2px;background-color:#f3f3f3;} .rc_box1{border-width:1px;line-height:1.5;} .rc_box2{margin:0 -2px;} .rc_box3{margin:1px -2px;padding:0 6px;} .ov1,.ov2{position:absolute;left:44%;overflow:hidden;width:0;height:0;border-left:6px dotted transparent;border-right:6px dotted transparent; border-top:6px solid transparent;} .lov1,.lov2{position:absolute;top:34%;overflow:hidden;width:0;height:0;border-top:6px dotted transparent;border-bottom:6px dotted transparent; border-right:6px solid transparent;} .ov1{top:26px;border-top-color:#ddd;} .ov2{top:25px;border-top-color:#f3f3f3;} .lov1{left:-9px;border-right-color:#ddd;} .lov2{left:-8px;border-right-color:#f3f3f3;} </style> </head> <body> <div class="rc_box1"> <div class="rc_box2"> <div class="rc_box3">OH!我的天啊，太牛了！</div> </div> <div class="lov1"></div> <div class="lov2"></div> <div class="ov1"></div> <div class="ov2"></div> </div> </body> </html>
- 好的評價 如果您覺得此文章好，就請您
100%(1) 
- 差的評價 如果您覺得此文章差，就請您
0%(0) 
評論內容只代表網友觀點，與本站立場無關！
評論摘要(共 0 條，得分 0 分，平均 0 分)
查看完整評論