14种纯css3对话气泡样式代码

Posted on 2025-09-26 16:01 且行且思阅读(0) 评论(0) 收藏举报

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>14种纯css3对话气泡样式代码</title><link rel="stylesheet" href="default.css" /></head><body><div id="container"><div class="content"><h2>The basic bubble variants</h2><p class="triangle-isosceles">This only needs one HTML element.</p><p class="triangle-isosceles top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p><p class="triangle-isosceles left">But it could be any element you want.</p><p class="triangle-isosceles right">The entire appearance is created only with CSS.</p><p class="triangle-right">This only needs one HTML element.</p><p class="triangle-right top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p><p class="triangle-right left">But it could be any element you want.</p><p class="triangle-right right">The entire appearance is created only with CSS.</p><p class="triangle-obtuse">This only needs one HTML element.</p><p class="triangle-obtuse top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p><p class="triangle-obtuse left">But it could be any element you want.</p><p class="triangle-obtuse right">The entire appearance is created only with CSS.</p><p class="triangle-border">This only needs one HTML element.</p><p class="triangle-border top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p><p class="triangle-border left">But it could be any element you want.</p><p class="triangle-border right">The entire appearance is created only with CSS.</p><h2>Simple examples</h2><h3 class="example-commentheading">125 comments</h3><blockquote class="example-right"><p>Design is directed toward human beings. To design is to solve humanproblems by identifying them and executing the best solution.</p></blockquote><p>Ivan Chermayeff</p><blockquote class="example-obtuse"><p>It&#8217;s not what you look at that matters, it&#8217;s what yousee.</p></blockquote><p>Henry David Thoreau</p><blockquoteclass="example-twitter"cite="http://twitter.com/necolas/status/9880187933"><p>Takes me longer to write up blog posts on experiments or projectsthan to create them in the first place.</p></blockquote><p><a href="http://twitter.com/necolas">@necolas</a>at<a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p><div class="example-number">57</div><h2>More complex CSS3 examples</h2><p>Some more experimental speech bubbles that try to limit the damage inbrowsers lacking the necessary CSS3 support.</p><div class="pinched"><p><strong>It doesn&#8217;t matter what the first child element of this divis</strong>...but it does need a child element.</p></div><blockquote class="oval-speech"><p>This is a blockquote that is styled to look like a speech bubble</p></blockquote><blockquote class="oval-thought"><p>This is a blockquote that is styled to look like a thought bubble</p></blockquote><blockquote class="oval-quotes"><p>No, Donny, these men are nihilists, there&#8217;s nothing to beafraid of.</p></blockquote><p>Walter Sobchak</p><blockquote class="rectangle-speech-border"><p>This is a blockquote that is styled to look like a speech bubble</p></blockquote><blockquote class="oval-speech-border"><p>This is a blockquote that is styled to look like a speech bubble</p></blockquote><blockquote class="oval-thought-border"><p>This is a blockquote that is styled to look like a thought bubble</p></blockquote></div></div></body>
</html>

CSS

body {padding: 0;margin: 0;font: 1em/1.4 Cambria, Georgia, sans-serif;color: #333;background: #fff;
}a:link,
a:visited {border-bottom: 1px solid #c55500;color: #c55500;text-decoration: none;
}a:visited {border-bottom: 1px solid #730800;color: #730800;
}a:hover,
a:focus,
a:active {border: 0;color: #fff;background: #c55500;
}a:visited:hover,
a:visited:focus,
a:visited:active {color: #fff;background: #730800;
}#container {width: 500px;padding: 0 0 50px;margin: 0 auto;
}h1 {margin: 1em 0 0;font-size: 2.5em;font-weight: normal;line-height: 1.2;text-align: center;
}h2 {margin: 0.5em 0 1.5em;font-size: 1.25em;font-weight: normal;font-style: italic;text-align: center;
}p {margin: 1em 0;
}.content h2 {margin: 2em 0 0.75em;font-size: 2em;font-weight: bold;font-style: normal;text-align: left;
}blockquote {margin: 1em 0;
}blockquote p {margin: 0;font-size: 2em;
}.follow {clear: both;margin-top: 2em;font-size: 1.125em;
}.follow span {font-weight: bold;
}/*  Should you want to set a background colour on a containing element certain types of bubble effect may require you to include these  style declarations. */
.content {position: relative;z-index: 1;
}/* ============================================================================================================================== BUBBLE WITH AN ISOCELES TRIANGLE** ============================================================================================================================ */
/* THE SPEECH BUBBLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-isosceles {position: relative;padding: 15px;margin: 1em 0 3em;color: #000;background: #f3961c;/* default background for browsers without gradient support *//* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));background: -moz-linear-gradient(top, #f9d835, #f3961c);background: -o-linear-gradient(top, #f9d835, #f3961c);
}/* Variant : for top positioned triangle------------------------------------------ */
.triangle-isosceles.top {/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835));background: -moz-linear-gradient(top, #f3961c, #f9d835);background: -o-linear-gradient(top, #f3961c, #f9d835);
}/* Variant : for left/right positioned triangle------------------------------------------ */
.triangle-isosceles.left {margin-left: 50px;background: #f3961c;
}/* Variant : for right positioned triangle------------------------------------------ */
.triangle-isosceles.right {margin-right: 50px;background: #f3961c;
}/* THE TRIANGLE------------------------------------------------------------------------------------------------------------------------------- */
/* creates triangle */
.triangle-isosceles:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -15px;/* value = - border-top-width - border-bottom-width */left: 50px;/* controls horizontal position */width: 0;height: 0;border-width: 15px 15px 0;/* vary these values to change the angle of the vertex */border-style: solid;border-color: #f3961c transparent;
}/* Variant : top------------------------------------------ */
.triangle-isosceles.top:after {top: -15px;/* value = - border-top-width - border-bottom-width */right: 50px;/* controls horizontal position */bottom: auto;left: auto;border-width: 0 15px 15px;/* vary these values to change the angle of the vertex */border-color: #f3961c transparent;
}/* Variant : left------------------------------------------ */
.triangle-isosceles.left:after {top: 16px;/* controls vertical position */left: -50px;/* value = - border-left-width - border-right-width */bottom: auto;border-width: 10px 50px 10px 0;border-color: transparent #f3961c;
}/* Variant : right------------------------------------------ */
.triangle-isosceles.right:after {top: 16px;/* controls vertical position */right: -50px;/* value = - border-left-width - border-right-width */bottom: auto;left: auto;border-width: 10px 0 10px 50px;border-color: transparent #f3961c;
}/* ============================================================================================================================== BUBBLE WITH A RIGHT-ANGLED TRIANGLE** ============================================================================================================================ */
/* THE SPEECH BUBBLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-right {position: relative;padding: 15px;margin: 1em 0 3em;color: #fff;background: #075698;/* default background for browsers without gradient support *//* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));background: -moz-linear-gradient(top, #2e88c4, #075698);background: -o-linear-gradient(top, #2e88c4, #075698);
}/* Variant : for top positioned triangle------------------------------------------ */
.triangle-right.top {/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));background: -moz-linear-gradient(top, #075698, #2e88c4);background: -o-linear-gradient(top, #075698, #2e88c4);
}/* Variant : for left positioned triangle------------------------------------------ */
.triangle-right.left {margin-left: 40px;background: #075698;
}/* Variant : for right positioned triangle------------------------------------------ */
.triangle-right.right {margin-right: 40px;background: #075698;
}/* THE TRIANGLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-right:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -20px;/* value = - border-top-width - border-bottom-width */left: 50px;/* controls horizontal position */width: 0;height: 0;border-width: 20px 0 0 20px;/* vary these values to change the angle of the vertex */border-style: solid;border-color: #075698 transparent;
}/* Variant : top------------------------------------------ */
.triangle-right.top:after {top: -20px;/* value = - border-top-width - border-bottom-width */right: 50px;/* controls horizontal position */bottom: auto;left: auto;border-width: 20px 20px 0 0;/* vary these values to change the angle of the vertex */border-color: transparent #075698;
}/* Variant : left------------------------------------------ */
.triangle-right.left:after {top: 16px;left: -40px;/* value = - border-left-width - border-right-width */bottom: auto;border-width: 15px 40px 0 0;/* vary these values to change the angle of the vertex */border-color: transparent #075698;
}/* Variant : right------------------------------------------ */
.triangle-right.right:after {top: 16px;right: -40px;/* value = - border-left-width - border-right-width */bottom: auto;left: auto;border-width: 15px 0 0 40px;/* vary these values to change the angle of the vertex */border-color: transparent #075698;
}/* ============================================================================================================================== BUBBLE WITH AN OBTUSE TRIANGLE** ============================================================================================================================ */
/* THE SPEECH BUBBLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-obtuse {position: relative;padding: 15px;margin: 1em 0 3em;color: #fff;background: #c81e2b;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#f04349), to(#c81e2b));background: -moz-linear-gradient(top, #f04349, #c81e2b);background: -o-linear-gradient(top, #f04349, #c81e2b);
}/* Variant : for top positioned triangle------------------------------------------ */
.triangle-obtuse.top {/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#c81e2b), to(#f04349));background: -moz-linear-gradient(top, #c81e2b, #f04349);background: -o-linear-gradient(top, #c81e2b, #f04349);
}/* Variant : for left positioned triangle------------------------------------------ */
.triangle-obtuse.left {margin-left: 50px;background: #c81e2b;
}/* Variant : for right positioned triangle------------------------------------------ */
.triangle-obtuse.right {margin-right: 50px;background: #c81e2b;
}/* THE TRIANGLE------------------------------------------------------------------------------------------------------------------------------- */
/* creates the wider right-angled triangle */
.triangle-obtuse:before {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -20px;/* value = - border-top-width - border-bottom-width */left: 60px;/* controls horizontal position */width: 0;height: 0;border: 0;border-right-width: 30px;/* vary this value to change the angle of the vertex */border-bottom-width: 20px;/* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */border-style: solid;border-color: transparent #c81e2b;
}/* creates the narrower right-angled triangle */
.triangle-obtuse:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -20px;/* value = - border-top-width - border-bottom-width */left: 80px;/* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */width: 0;height: 0;border-width: 0;border-right-width: 10px;/* vary this value to change the angle of the vertex */border-bottom-width: 20px;/* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */border-style: solid;border-color: transparent #fff;
}/* Variant : top------------------------------------------ */
.triangle-obtuse.top:before {top: -20px;/* value = - border-top-width - border-bottom-width */right: 60px;/* controls horizontal position */bottom: auto;left: auto;border: 0;border-left-width: 30px;/* vary this value to change the width of the triangle */border-top-width: 20px;/* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */border-style: solid;border-color: transparent #c81e2b;
}.triangle-obtuse.top:after {top: -20px;/* value = - border-top-width - border-bottom-width */right: 80px;/* value = (:before's right) + (:before's border-right/left-width)  - (:after's border-right/left-width) */bottom: auto;left: auto;border-width: 0;border-left-width: 10px;/* vary this value to change the width of the triangle */border-top-width: 20px;/* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */border-style: solid;border-color: transparent #fff;
}/* Variant : left------------------------------------------ */
.triangle-obtuse.left:before {top: 15px;/* controls vertical position */left: -50px;/* value = - border-left-width - border-right-width */bottom: auto;border: 0;border-bottom-width: 30px;/* vary this value to change the height of the triangle */border-left-width: 50px;/* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */border-style: solid;border-color: #c81e2b transparent;
}.triangle-obtuse.left:after {top: 35px;/* value = (:before's top) + (:before's border-top/bottom-width)  - (:after's border-top/bottom-width) */left: -50px;/* value = - border-left-width - border-right-width */bottom: auto;border: 0;border-bottom-width: 10px;/* vary this value to change the height of the triangle */border-left-width: 50px;/* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */border-style: solid;border-color: #fff transparent;
}/* Variant : right------------------------------------------ */
.triangle-obtuse.right:before {top: 15px;/* controls vertical position */right: -50px;/* value = - border-left-width - border-right-width */bottom: auto;border: 0;left: auto;border-bottom-width: 30px;/* vary this value to change the height of the triangle */border-right-width: 50px;/* vary this value to change the width of the triangle. must be equal to the corresponding value in :after */border-style: solid;border-color: #c81e2b transparent;
}.triangle-obtuse.right:after {top: 35px;/* value = (:before's top) + (:before's border-top/bottom-width)  - (:after's border-top/bottom-width) */right: -50px;/* value = - border-left-width - border-right-width */bottom: auto;border: 0;left: auto;border-bottom-width: 10px;/* vary this value to change the height of the triangle */border-right-width: 50px;/* vary this value to change the width of the triangle. must be equal to the corresponding value in :before */border-style: solid;border-color: #fff transparent;
}/* ============================================================================================================================== BUBBLE WITH A BORDER AND TRIANGLE** ============================================================================================================================ */
/* THE SPEECH BUBBLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-border {position: relative;padding: 15px;margin: 1em 0 3em;border: 5px solid #5a8f00;color: #333;background: #fff;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}/* Variant : for left positioned triangle------------------------------------------ */
.triangle-border.left {margin-left: 30px;
}/* Variant : for right positioned triangle------------------------------------------ */
.triangle-border.right {margin-right: 30px;
}/* THE TRIANGLE------------------------------------------------------------------------------------------------------------------------------- */
.triangle-border:before {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -40px;/* value = - border-top-width - border-bottom-width */left: 40px;/* controls horizontal position */width: 0;height: 0;border: 20px solid transparent;border-top-color: #5a8f00;
}/* creates the smaller  triangle */
.triangle-border:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -26px;/* value = - border-top-width - border-bottom-width */left: 47px;/* value = (:before left) + (:before border-left) - (:after border-left) */width: 0;height: 0;border: 13px solid transparent;border-top-color: #fff;
}/* Variant : top------------------------------------------ */
/* creates the larger triangle */
.triangle-border.top:before {top: -40px;/* value = - border-top-width - border-bottom-width */right: 40px;/* controls horizontal position */bottom: auto;left: auto;border: 20px solid transparent;border-bottom-color: #5a8f00;
}/* creates the smaller  triangle */
.triangle-border.top:after {top: -26px;/* value = - border-top-width - border-bottom-width */right: 47px;/* value = (:before right) + (:before border-right) - (:after border-right) */bottom: auto;left: auto;border: 13px solid transparent;border-bottom-color: #fff;
}/* Variant : left------------------------------------------ */
/* creates the larger triangle */
.triangle-border.left:before {top: 10px;/* controls vertical position */left: -30px;/* value = - border-left-width - border-right-width */bottom: auto;border-width: 15px 30px 15px 0;border-style: solid;border-color: transparent #5a8f00;
}/* creates the smaller  triangle */
.triangle-border.left:after {top: 16px;/* value = (:before top) + (:before border-top) - (:after border-top) */left: -21px;/* value = - border-left-width - border-right-width */bottom: auto;border-width: 9px 21px 9px 0;border-style: solid;border-color: transparent #fff;
}/* Variant : right------------------------------------------ */
/* creates the larger triangle */
.triangle-border.right:before {top: 10px;/* controls vertical position */right: -30px;/* value = - border-left-width - border-right-width */bottom: auto;left: auto;border-width: 15px 0 15px 30px;border-style: solid;border-color: transparent #5a8f00;
}/* creates the smaller  triangle */
.triangle-border.right:after {top: 16px;/* value = (:before top) + (:before border-top) - (:after border-top) */right: -21px;/* value = - border-left-width - border-right-width */bottom: auto;left: auto;border-width: 9px 0 9px 21px;border-style: solid;border-color: transparent #fff;
}/* ============================================================================================================================== SPEECH BUBBLE ICON** ============================================================================================================================ */
.example-commentheading {position: relative;padding: 0;color: #b513af;
}/* creates the rectangle */
.example-commentheading:before {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;top: 9px;left: -25px;width: 15px;height: 10px;background: #b513af;/* css3 */-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}/* creates the triangle */
.example-commentheading:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;top: 15px;left: -19px;width: 0;height: 0;border: 4px solid transparent;border-left-color: #b513af;
}/* ============================================================================================================================== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE** ============================================================================================================================ */
.example-right {position: relative;padding: 15px 30px;margin: 0;color: #fff;background: #5a8f00;/* default background for browsers without gradient support *//* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));background: -moz-linear-gradient(top, #b8db29, #5a8f00);background: -o-linear-gradient(top, #b8db29, #5a8f00);
}/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-right+p {margin: 15px 0 2em 85px;font-style: italic;
}/* creates the triangle */
.example-right:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -50px;left: 50px;width: 0;height: 0;border-width: 0 20px 50px 0px;border-style: solid;border-color: transparent #5a8f00;
}/* ============================================================================================================================== BLOCKQUOTE WITH OBTUSE TRIANGLE** ============================================================================================================================ */
.example-obtuse {position: relative;padding: 15px 30px;margin: 0;color: #000;background: #f3961c;/* default background for browsers without gradient support *//* css3    Using longhand to avoid inconsistencies between Safari 4 and Chrome 4    */-webkit-border-top-left-radius: 25px 50px;-webkit-border-top-right-radius: 25px 50px;-webkit-border-bottom-right-radius: 25px 50px;-webkit-border-bottom-left-radius: 25px 50px;-moz-border-radius: 25px / 50px;border-radius: 25px / 50px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));background: -moz-linear-gradient(top, #f9d835, #f3961c);background: -o-linear-gradient(top, #f9d835, #f3961c);
}/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse+p {margin: 10px 150px 2em 0;text-align: right;font-style: italic;
}/* creates the larger triangle */
.example-obtuse:before {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -30px;right: 80px;width: 0;height: 0;border-width: 0 0 30px 50px;border-style: solid;border-color: transparent #f3961c;
}/* creates the smaller triangle */
.example-obtuse:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -30px;right: 110px;width: 0;height: 0;border-width: 0 0 30px 20px;border-style: solid;border-color: transparent #fff;
}/* ============================================================================================================================== TWITTER** ============================================================================================================================ */
.example-twitter {position: relative;padding: 15px;margin: 100px 0 0.5em;color: #333;background: #eee;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}.example-twitter p {font-size: 28px;line-height: 1.25em;
}/* this isn't necessary, just saves me having to edit the HTML of the demo */
.example-twitter:before {content: url(twitter-logo.gif);display: block;/* reduce the damage in FF3.0 */position: absolute;top: -60px;left: 0;width: 155px;height: 36px;
}/* creates the triangle */
.example-twitter:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;top: -30px;left: 50px;width: 0;height: 0;border: 15px solid transparent;border-bottom-color: #eee;
}/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-twitter+p {padding-left: 15px;font: 14px Arial, sans-serif;
}/* ============================================================================================================================== NUMBER** ============================================================================================================================ */
.example-number {position: relative;width: 200px;height: 200px;margin: 50px 0 200px;text-align: center;font: 140px/200px Arial, sans-serif;color: #fff;background: #C91F2C;
}/* creates the larger triangle */
.example-number:before {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -140px;right: 0;width: 0;height: 0;border-width: 0 0 140px 140px;border-style: solid;border-color: transparent #C91F2C;
}/* creates the larger triangle */
.example-number:after {content: "";display: block;/* reduce the damage in FF3.0 */position: absolute;bottom: -140px;right: 85px;width: 0;height: 0;border-width: 0 0 140px 55px;border-style: solid;border-color: transparent #fff;
}/* ============================================================================================================================== PINCHED SPEECH BUBBLE (more CSS3)** ============================================================================================================================ */
.pinched {position: relative;padding: 15px;margin: 50px 0 3em;text-align: center;color: #fff;background: #333;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}/* creates a rectangle of the colour wanted for the pointy bit */
.pinched:before {content: "";position: absolute;top: -20px;left: 50%;width: 100px;height: 20px;margin: 0 0 0 -50px;background: #333;
}/* creates a rounded rectangle to cover part of the rectangle generated above */
.pinched:after {content: "";position: absolute;top: -20px;left: 0;width: 50%;height: 20px;background: #fff;/* css3 */-moz-border-radius-bottomright: 15px;-webkit-border-bottom-right-radius: 15px;border-bottom-right-radius: 15px;
}/* creates the other rounded rectangle */
.pinched>:first-child:before {content: "";position: absolute;top: -20px;right: 0;width: 50%;height: 20px;background: #fff;/* css3 */-moz-border-radius-bottomleft: 15px;-webkit-border-bottom-left-radius: 15px;border-bottom-left-radius: 15px;
}/* ============================================================================================================================== OVAL SPEECH BUBBLE (more CSS3)** ============================================================================================================================ */
.oval-speech {position: relative;width: 270px;padding: 50px 40px;margin: 1em auto 50px;text-align: center;color: #fff;background: #5a8f00;/* css3 *//*    NOTES:    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this    */-webkit-border-top-left-radius: 220px 120px;-webkit-border-top-right-radius: 220px 120px;-webkit-border-bottom-right-radius: 220px 120px;-webkit-border-bottom-left-radius: 220px 120px;-moz-border-radius: 220px / 120px;border-radius: 220px / 120px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));background: -moz-linear-gradient(top, #b8db29, #5a8f00);background: -o-linear-gradient(top, #b8db29, #5a8f00);
}.oval-speech p {font-size: 1.25em;
}/* creates part of the curve */
.oval-speech:before {content: "";position: absolute;z-index: -1;bottom: -30px;right: 50%;width: 0;height: 30px;border-right: 60px solid #5a8f00;background: #5a8f00;/* need this for webkit - bug in handling of border-radius *//* css3 */-moz-border-radius-bottomright: 80px 50px;-webkit-border-bottom-right-radius: 80px 50px;border-bottom-right-radius: 80px 50px;/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */-moz-transform: translate(0, -2px);-webkit-transform: translate(0, -2px);-o-transform: translate(0, -2px);transform: translate(0, -2px);
}/* creates part of the curved pointy bit */
.oval-speech:after {content: "";position: absolute;z-index: -1;bottom: -30px;right: 50%;width: 60px;height: 30px;background: #fff;/* css3 */-moz-border-radius-bottomright: 40px 50px;-webkit-border-bottom-right-radius: 40px 50px;border-bottom-right-radius: 40px 50px;/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */-moz-transform: translate(-30px, -2px);-webkit-transform: translate(-30px, -2px);-o-transform: translate(-30px, -2px);transform: translate(-30px, -2px);
}/* ============================================================================================================================== OVAL THOUGHT BUBBLE (more CSS3)** ============================================================================================================================ */
.oval-thought {position: relative;width: 270px;padding: 50px 40px;margin: 1em auto 80px;text-align: center;color: #fff;background: #075698;/* css3 *//*    NOTES:    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this    */-webkit-border-top-left-radius: 220px 120px;-webkit-border-top-right-radius: 220px 120px;-webkit-border-bottom-right-radius: 220px 120px;-webkit-border-bottom-left-radius: 220px 120px;-moz-border-radius: 220px / 120px;border-radius: 220px / 120px;/* NOTE: webkit gradient implementation is not as per spec */background: -webkit-gradient(linear, left top, left bottom, from(#2e88c4), to(#075698));background: -moz-linear-gradient(top, #2e88c4, #075698);background: -o-linear-gradient(top, #2e88c4, #075698);
}.oval-thought p {font-size: 1.25em;
}/* creates the larger circle */
.oval-thought:before {content: "";position: absolute;bottom: -20px;left: 50px;width: 30px;height: 30px;background: #075698;/* css3 */-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;
}/* creates the smaller circle */
.oval-thought:after {content: "";position: absolute;bottom: -30px;left: 30px;width: 15px;height: 15px;background: #075698;/* css3 */-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;
}/* ============================================================================================================================== OVAL SPEECH BUBBLE WITH QUOTATION MARKS (more CSS3)** ============================================================================================================================ */
.oval-quotes {position: relative;width: 400px;height: 350px;margin: 2em auto 10px;color: #000;background: #ffed26;/* css3 *//*    NOTES:    -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4    -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this    */-webkit-border-top-left-radius: 400px 350px;-webkit-border-top-right-radius: 400px 350px;-webkit-border-bottom-right-radius: 400px 350px;-webkit-border-bottom-left-radius: 400px 350px;-moz-border-radius: 400px / 350px;border-radius: 400px / 350px;
}/* creates opening quotation mark */
.oval-quotes:before {content: "\201C";position: absolute;z-index: 1;top: 20px;left: 20px;font: 80px/1 Georgia;color: #ffed26;
}/* creates closing quotation mark */
.oval-quotes:after {content: "\201D";position: absolute;z-index: 1;bottom: 0;right: 20px;font: 80px/0.25 Georgia;color: #ffed26;
}.oval-quotes p {width: 250px;height: 250px;padding: 50px 0 0;margin: 0 auto;text-align: center;font-size: 35px;
}/* creates larger curve */
.oval-quotes p:before {content: "";position: absolute;z-index: -1;bottom: -30px;right: 25%;width: 0;height: 80px;border-right: 200px solid #ffed26;background: #ffed26;/* need this for webkit - bug in handling of border-radius *//* css3 */-moz-border-radius-bottomright: 200px 100px;-webkit-border-bottom-right-radius: 200px 100px;border-bottom-right-radius: 200px 100px;/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */-moz-transform: translate(0, -2px);-webkit-transform: translate(0, -2px);-o-transform: translate(0, -2px);transform: translate(0, -2px);
}/* creates smaller curve */
.oval-quotes p:after {content: "";position: absolute;z-index: -1;bottom: -30px;right: 55%;width: 180px;/* wider than necessary to make it look a bit better in IE8 */height: 60px;background: #fff;/* need this for webkit - bug in handling of border-radius *//* css3 */-moz-border-radius-bottomright: 40px 50px;-webkit-border-bottom-right-radius: 40px 50px;border-bottom-right-radius: 40px 50px;/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */-moz-transform: translate(-30px, -2px);-webkit-transform: translate(-30px, -2px);-o-transform: translate(-30px, -2px);transform: translate(-30px, -2px);
}.oval-quotes+p {position: relative;/* part of the IE8 width compromise */width: 150px;margin: 0 0 2em;font-size: 18px;font-weight: bold;
}/* ============================================================================================================================== RECTANGLE-BORDER STYLE WITH CURVE** ============================================================================================================================ */
.rectangle-speech-border {position: relative;padding: 50px 15px;margin: 1em 0 3em;border: 10px solid #5a8f00;text-align: center;color: #333;background: #fff;/* css3 */-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;
}/* creates larger curve */
.rectangle-speech-border:before {content: "";position: absolute;z-index: 10;bottom: -40px;left: 50px;width: 50px;height: 30px;border-style: solid;border-width: 0 10px 10px 0;border-color: #5a8f00;background: transparent;/* css3 */-moz-border-radius-bottomright: 80px 50px;-webkit-border-bottom-right-radius: 80px 50px;border-bottom-right-radius: 80px 50px;
}/* creates smaller curve */
.rectangle-speech-border:after {content: "";position: absolute;z-index: 10;bottom: -40px;left: 50px;width: 20px;height: 30px;border-style: solid;border-width: 0 10px 10px 0;border-color: #5a8f00;background: transparent;/* css3 */-moz-border-radius-bottomright: 40px 50px;-webkit-border-bottom-right-radius: 40px 50px;border-bottom-right-radius: 40px 50px;
}/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border>:first-child:before {content: "";position: absolute;bottom: -40px;left: 45px;width: 10px;height: 10px;background: #5a8f00;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border>:first-child:after {content: "";position: absolute;bottom: -10px;left: 76px;width: 24px;height: 15px;background: #fff;
}/* ============================================================================================================================== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)** ============================================================================================================================ */
.oval-speech-border {position: relative;padding: 70px 30px;margin: 1em auto 60px;border: 10px solid #f3961c;text-align: center;color: #333;background: #fff;/* css3 *//*    NOTES:    -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4    -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this    */-webkit-border-top-left-radius: 240px 140px;-webkit-border-top-right-radius: 240px 140px;-webkit-border-bottom-right-radius: 240px 140px;-webkit-border-bottom-left-radius: 240px 140px;-moz-border-radius: 240px / 140px;border-radius: 240px / 140px;
}/* creates larger curve */
.oval-speech-border:before {content: "";position: absolute;z-index: 2;bottom: -40px;right: 50%;width: 50px;height: 30px;border-style: solid;border-width: 0 10px 10px 0;border-color: #f3961c;margin-right: -10px;background: transparent;/* css3 */-moz-border-radius-bottomright: 80px 50px;-webkit-border-bottom-right-radius: 80px 50px;border-bottom-right-radius: 80px 50px;
}/* creates smaller curve */
.oval-speech-border:after {content: "";position: absolute;z-index: 2;bottom: -40px;right: 50%;width: 20px;height: 31px;border-style: solid;border-width: 0 10px 10px 0;border-color: #f3961c;margin-right: 20px;background: transparent;/* css3 */-moz-border-radius-bottomright: 40px 50px;-webkit-border-bottom-right-radius: 40px 50px;border-bottom-right-radius: 40px 50px;
}/* creates a small circle to produce a rounded point where the two curves meet */
.oval-speech-border>:first-child:before {content: "";position: absolute;z-index: 1;bottom: -40px;right: 50%;width: 10px;height: 10px;margin-right: 45px;background: #f3961c;/* css3 */-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}/* creates a white rectangle to cover part of the oval border*/
.oval-speech-border>:first-child:after {content: "";position: absolute;z-index: 1;bottom: -10px;right: 50%;width: 30px;height: 15px;background: #fff;
}/* ============================================================================================================================== OVER THOUGHT BUBBLE, EMPTY, WITH BORDER (more CSS3)** ============================================================================================================================ */
.oval-thought-border {position: relative;padding: 70px 30px;margin: 1em auto 80px;border: 10px solid #c81e2b;text-align: center;color: #333;background: #fff;/* css3 *//*    NOTES:    -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4    -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this    */-webkit-border-top-left-radius: 240px 140px;-webkit-border-top-right-radius: 240px 140px;-webkit-border-bottom-right-radius: 240px 140px;-webkit-border-bottom-left-radius: 240px 140px;-moz-border-radius: 240px / 140px;border-radius: 240px / 140px;
}/* creates the larger circle */
.oval-thought-border:before {content: "";position: absolute;z-index: 10;bottom: -40px;right: 100px;width: 50px;height: 50px;border: 10px solid #c81e2b;background: #fff;/* css3 */-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;
}/* creates the smaller circle */
.oval-thought-border:after {content: "";position: absolute;z-index: 10;bottom: -60px;right: 50px;width: 25px;height: 25px;border: 10px solid #c81e2b;background: #fff;/* css3 */-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/918499.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

微信小程序使用地图map 实现定位和实时绘画轨迹

微信小程序使用地图map 实现定位和实时绘画轨迹1 文档官方文档api文档2 准备工作 2.1 注册开发者 1）进入腾讯位置服务官网地址2）注册注册号之后，这个key是需要用到的 2.2 开通地图服务 1）进入微信公众平台-账号设…

14种纯css3对话气泡样式代码

相关文章