首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css兑现对话框箭头效果

2012-11-22 
css实现对话框箭头效果用css实现对话框箭头效果 mark一下!DOCTYPE htmlhtmlheadmeta charsetutf-8

css实现对话框箭头效果
用css实现对话框箭头效果 mark一下

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title><style>.test{    width:300px;     top:20px;    padding:30px 20px;    border:5px solid #beceeb;     position:relative;}.test span{    width:0; height:0; font-size:0;    position:absolute;}.test span.bot{    border-width:20px;     border-style:solid;     border-color:transparent transparent #beceeb;     left:80px;     top:-40px;}.test span.top{    border-width:20px;     border-style:solid;     border-color:transparent transparent #ffffff;     left:80px;     top:-33px;}</style></head><body>  <div class="test">    <span class="bot"></span>    <span class="top"></span>    CSS “边框法”实现气泡对话框效果二</div></body></html>


在ie7/8上 overflow:hidden,border-style:dashed好像支持的不好,于是为了兼容性,把原文的这两条去掉,另外要重设一下margin-top。
原文出处 http://www.jb51.net/css/33743.html

热点排行