写一个简单的对话框样式,供参考
代码如下:
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<!----样式开始---->
<style>
.tip-bubble {
position: relative;
background-color:rgba(242, 240, 240, 1);
padding:10px 20px 10px 20px;
color:rgba(0,0,0, 0);
border-radius: 10px;
border: 1px solid rgba(242, 240, 240, 1);
}
.tip-bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid;
border-bottom-color: rgba(242, 240, 240, 1);
left: 50%;
bottom: 100%;
margin-left: -15px;
}
<!--
这里是设置对话框内的div中的字体颜色为 #000 黑色,
上面color:rgba(0,0,0, 0); 操作已将内容颜色设置为透明,
所有下面内容的颜色必须设置,否则看不到字体内容
-->
.tip-bubble div{
color:#000;
}
</style>
<!----样式结束---->
</head>
<body>
<br/>
<!---对话框开始--->
<div class="tip-bubble" >
<div >
这一个对话框
</div>
</div>
<!---对话框结束--->
</body>
</html>
上面是演示效果图↑