JavaScript 语音泡沫，圆角，无需图像。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 语音泡沫，圆角，无需图像。相关的知识，希望对你有一定的参考价值。
<!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" lang="de">
<head>
<title>Yet another speech bubble in CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="language" content="de" />
<meta name="description" content="Speech bubble in CSS. Sprechblase in CSS"/>
<meta name="keywords" content="Sprechblase, CSS, speech bubble" />
<meta name="robots" content="index, follow, noarchive" />
<style type="text/css">
html {
min-width: 460px;
height:100%;
}
body {
background: transparent url(bg.png) top left repeat-x;
background-color:#fff;
color: #000;
margin: 20px;
padding: 0;
text-align: left;
font-size:100.1%;
font: 83%/1.4 verdana, arial, helvetica, sans-serif;
}
h1, h2{
position: relative;
margin: 0 0 .2em;
font-size: 20px;
letter-spacing: 0;
text-transform: none;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
}
#main {
max-width: 800px;
}
.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block;
background:#fff;
border:3px solid #ddd;
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0;
color:#000;
margin:0 15px;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block;
overflow:hidden;
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;}
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}
.speech_bubble em{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #ddd;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.speech_bubble span{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}
* html .speech_bubble em {width:24px; height:12px; w\idth:0; hei\ght:0;}
* html .speech_bubble span {width:20px; height:10px; w\idth:0; hei\ght:0;}
</style>
</head>
<body>
<div id="main">
<h1>Yet another speech bubble in CSS</h1><br/>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>This speach bubble is made with no images: It's 100% pure css! Therefore it works with JavaScript and images switched off.</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<h1>Finn</h1>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>The css code is an altered version of <a href="http://www.cssplay.co.uk/boxes/chunky.html">Stu Nicholls speech bubbles</a> on CSSplay.</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<h1>Egon</h1>
</div>
</body>
</html>以上是关于JavaScript 语音泡沫，圆角，无需图像。的主要内容，如果未能解决你的问题，请参考以下文章