[代码收集]爱疯气泡消息代码 - 笑忘书网页代码收藏馆

首页-代码 2013-06-22 02:01:53 -0400

★爱疯气泡消息代码★

请勿抄袭本页面

代码说明

使用方法：CSS代码要结合html代码使用

CSS代码

.the_user{color:#000;position: relative; padding-bottom:20px;}
.the_user{text-align:left;padding-left:10px}
.bubble {position:relative;display: inline-block;min-width:30px;max-width:270px;word-break: break-all;word-wrap:break-word;min-height:22px;background:#d2d2d2;border-radius:15px;margin-bottom:20px;padding:6px 8px;-webkit-box-shadow:0px 1px 2px #000, inset 0px 4px 4px rgba(0,0,0,.3), inset 0px -4px 4px rgba(255,255,255,.5);-moz-shadow:0px 1px 2px #000, inset 0px 4px 4px rgba(0,0,0,.3), inset 0px -4px 4px rgba(255,255,255,.5);box-shadow:0px 1px 2px #000, inset 0px 4px 4px rgba(0,0,0,.3), inset 0px -4px 4px rgba(255,255,255,.5);}
.bubble:before {content: ''; display:block;font-size:0;width: 0;height:0;border-width:6px;position:absolute;bottom:-12px; left:12px;border-color:#4a4c50 transparent transparent #4a4c50;border-style:solid dashed dashed solid;}
.bubble:after{content:'';display: block;font-size:0;position:absolute;bottom:-9px;left:13px;width:0;height:0;border-width:5px;border-color:#e8e8e8 transparent transparent #e8e8e8;border-style:solid dashed dashed solid;}
.bubble .con{background:none;position:relative;padding:4px;}
.bubble .con:before {content: ''; position: absolute; margin: auto; top:-5px; left:0;width:100%;height:12px;background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 90%, rgba(255,255,255,0) 90% ); background-image: -moz-linear-gradient(top,rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 90%, rgba(255,255,255,0) 90%); border-radius:10px}

html代码

代码演示

显示文字

[代码仅供参考，不能复制请留言]

----Comments(3)----
X6 (@x6) | @ at 2013-08-07 06:04:
怎

庶南、 (@tls) | @ at 2013-07-02 23:21:
<div class="the_user"><div class="bubble"><div class="con">显示文字</div></div></div>

怒放家族de霖 (@wxf) | @ at 2013-06-22 02:39:
<div class="the_user"><div class="bubble"><div class="con">路过</div></div></div>

Subscribe | Register | Login | N