CSS dialog box special effect compatibility is good, css dialog box special effect
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> CSS dialog box </title>
<Style type = "text/css">
* {Padding: 0; margin: 0; font-size: 12px ;}
Body {padding: 50px ;}
. Arrow {position: relative; width: 20px; height: 20px; margin: 0 0 0 15px ;}
. Arrow. arrow_border,. arrow. arrow_content {width: 0; height: 0; overflow: hidden; border-width: 10px; border-style: dashed solid
Dashed ;}
. Arrow. arrow_border {border-color: transparent # CCCCCC transparent ;}
. Arrow. arrow_content {border-color: transparent # EEEEEE transparent; position: absolute; top: 1px ;}
. Main {width: 400px ;}
. B1,. b2,. b3,. b4,. b5,. b6,. b7,. b8 {height: 1px; overflow: hidden; display: block ;}
. B1,. b8 {height: 0px; margin: 0 5px ;}
. B1 {border-bottom: # CCC solid 1px ;}
. B8 {border-top: # CCC solid 1px ;}
. B2,. b3,. b4,. b5,. b6,. b7 {border-left: # CCC solid 1px; border-right: # CCC solid 1px ;}
. B2,. b7 {margin: 0 3px; border-width: 2px ;}
. B3,. b6 {margin: 0 2px ;}
. B4,. b5 {margin: 0 1px; height: 2px ;}
. B2,. b3,. b4,. b5,. b6,. b7,. content {background-color: # EEE ;}
. Content {border-left: solid # CCC 1px; border-right: solid # CCC 1px; padding: 25px; position: relative ;}
. Content span {font-size: 72px; color: # CCCCCC; position: absolute ;}
. Content span. font-left {top:-10px; left:-30px; _ left:-55px;/* to be compatible with IE6.0 */}
. Content span. font-right {bottom:-45px; right:-30px ;}
. Content p {text-indent: 2em ;}
. Content p. translation {text-align: right; font-style: italic ;}
</Style>
</Head>
<Body>
<Div class = "arrow">
<Div class = "arrow_border"> </div>
<Div class = "arrow_content"> </div>
</Div>
<Div class = "main">
<B class = "b1"> </B>
<B class = "b2"> </B>
<B class = "b3"> </B>
<B class = "b4"> </B>
<Div class = "content">
<Span class = "font-left"> "</span>
<Span class = "font-right"> "</span>
<P> CSS-implemented dialog box effects are implemented by pure CSS instead of CSS3, so the compatibility is quite good. You can use some such boxes on the webpage.
</P>
</Div>
<B class = "b5"> </B>
<B class = "b6"> </B>
<B class = "b7"> </B>
<B class = "b8"> </B>
</Div>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>