/原理：
制造◆ 这形状，上面的盖住下面的，留出一象素的距离，做出边线的效果。
一种是通过文字，一种是通过border
有很多人，加我QQ说，不太会用position。简单的讲：
父级：position:relative;不脱离文档文档流，如果不设，子级会往上找父级有这个值的，如果没有一直找到body
子级：position:absolute;子级就会相对于父级来定位。脱离文档流
/
/一、兼容写法，但是结构复杂些/
.dialogBox{position:relative;margin-left:30px;}
.arrow{position:absolute;top:15%;left:-8px;}
.arrow i,.arrow b{display:block;text-shadow: none;font-style:normal;}
.arrow i {color:#fffcef;margin-top:-18px;margin-left:2px;}
.arrow b {color:#ffbb76;}
.dialogBox span{max-width: 500px;min-width:150px;width:auto;display:block;padding:10px;
line-height: 16px;font-size: 12px;color: #db7c22;
word-wrap: break-word;word-break: break-all;border: 1px solid transparent;
background-color: #fffcef;
border-color: #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}
/二、不兼容IE8,结构简单/
.db01{position: relative;max-width: 500px;min-width:150px;width:auto;padding:10px; margin-left:30px;color: #db7c22;font-size: 12px;
background-color: #fffcef; border: 1px solid #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}
.db01:after, .db01:before {top:10%;width: 0;height: 0;position: absolute;content: ' '; border:10px solid transparent; }
.db01:after {left: -18px;border-right-color: #fffcef;}
.db01:before {left:-20px;border-right-color: #ffbb76; }
/三、结合jq，鼠标划过显示提示/
/提示框/
.stringCut{position:relative;}
.stringCut .db {position: absolute;z-index:100;max-width: 500px;min-width:150px;width:auto;padding:10px; margin-left:30px;color: #db7c22;line-height:20px;font-size: 12px;word-wrap: break-word;word-break: break-all;
background-color: #fffcef; border: 1px solid #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}
.stringCut .db:after,.stringCut .db:before {left:30%;width: 0;height: 0;position: absolute;content: ' '; border:10px solid transparent; }
.stringCut .db:after {top: -18px;border-bottom-color: #fffcef;}
.stringCut .db:before {top:-20px;border-bottom-color: #ffbb76;}
一、结构复杂些
◆
◆
fdsafewrewqwe
二、结构简单
dfsaerwqrewqrew
划过出现
fdkslajdksljf@163.com
