如何用纯 CSS 实现气泡对话框

Question

比如 segmentfault 的回复效果，没有用到图片

Answer 1

可参考这里： http://ued.taobao.com/blog/2010/08/04...

使用额外无意义的 div 可以完成纯 css 的泡框效果，但不推荐因为效果而加入无意义的 html 结构，但目前的情况来讲除 ie 系列外似乎现代浏览器都能很好搞定这个问题

Answer 2

以前做过一个PageCookery的主题

.entry{
width:-moz-fit-content;width:intrinsic;
border-radius:10px;
padding:5px 10px;
margin:20px auto auto;
border:1px solid #d0d0d0;
border-color:#d0d0d0 #ccc #ccc #d0d0d0;
background:#e9e9e9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(245,245,245,0.8)),color-stop(1, rgb(225,225,225,0.8)));
background:-moz-linear-gradient(center top,rgba(245,245,245,0.8) 5px,rgba(225,225,225,0.8) 100%);
-moz-transition:all 1s ease-out;-webkit-transition:all 1s ease-out;transition:all 1s ease-out;
box-shadow:#ccc 1px 2px 2px;}
.entry:hover{
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(245,245,245,1)),color-stop(1, rgb(225,225,225,1)));
background:-moz-linear-gradient(center top,rgba(245,245,245,1) 5px,rgba(225,225,225,1) 100%);
box-shadow:#ccc 1px 2px 8px;
}
.entry:after{
content:" ";
margin:-6px 0px 0px 0px;
border:10px solid transparent;
position:absolute;
border-color:#d0d0d0 transparent transparent transparent;
-moz-transform: rotate(135deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);
}

Answer 3

• 灰框元素里再写个空白标签, 通过设置 border 可以弄出来3角内裤状..然后浮动/定位到相应位置
• 不管老ie的话,在 :after 里面随便玩玩就出来了

Answer 4

实际上这里用了css的两个特性

CSS边框交界

可以看看下面这段代码的效果

.test {width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}

用before和after伪类

这两个伪类ie6和7不支持。它的实际作用就是如果你定义了.test:before和.test:after伪类，那么你就好比.test的元素前面和后面分别插入了两个元素。

结合这两个方法，我们就可以在不破坏原有结构的情况下创造对话框效果了。

Answer 5

参考这里：http://sofish.de/2044