最新消息:网站改版咯

气泡提示框css实现

Web技术 Yovae 1671浏览

气泡对话框一般用于 tooltip 提示框,或者评论留言的对话框等,在页面设计中经常可以看到。通常是用制作图片然后分割应用背景于元素上来实现,如果是圆角气泡对话框的话可能需要应用于更多元素上,显得非常麻烦,图片也会增加 HTTP Requests,用 CSS 的 :before 或 :after 伪类实现气泡对话框会省事很多,不过 IE6 和 IE7 不支持该伪类。

我们其实可以把气泡对话框看出是箭头加主题内容框组成的,在 CSS 的实现上也正是如此,我们先设定内容框的背景和圆角,然后再通过 :before 或 :after 设置箭头方向即可。先以第二个例子(相对简单)来说:

主体提示内容的样式:

.tooltip {
    background: black;
    display: inline-block;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding:0px 15px 10px;
}

设置实现箭头指向:

.tooltip:before {
    content: "";
    width: 0;
    height: 0;
    font-size: 0;
    position: relative; /* 定位,也可以使用 absolute,看具体定位需求 */
    border: 10px solid transparent; /* 箭头大小 */
    border-bottom-color: black; /* 箭头颜色 */
    border-top: 0; /* 箭头指向相对应的 border 为 0 */
    overflow: hidden;
    top: -10px;
    display: block;
}

如果箭头居中显示的话,可以增加 margin: 0 auto。对于 border,当箭头指向上方,那么我们就要设定 border-bottom 的颜色,并且把指向的 border-top 设置为 0,其他方向依此类推,具体可以参考第三个例子,是关于箭头的方向设置的;对于 display: block,在水平方向上和垂直方向上的使用有差异。

关于箭头方向的实现:

#arrow:after {
    content: "";
    font-size: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 15px;
    border-style: solid;
    border-color: red green orange black;
    position: relative; /* absolute 也行,看你定位需求了 */
    display: block; /* 根据需求 */
}

多体会代码,看看最后一个代码关于箭头方向的实现,在比较一下前面两个例子就很简单了。

转载请注明:Yovae Studio » 气泡提示框css实现