冒泡提示框的纯css脚本

最新推荐文章于 2024-02-06 14:36:32 发布

xq30397022

最新推荐文章于 2024-02-06 14:36:32 发布

阅读量2.3k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/tksnail/article/details/9787727

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<style type="text/css">
 
/*  这个是用来存放显示内容的div样式   */
.tip-bubble {
 position: absolute;
 background-color: #202020;
 width: 100px;
 padding: 10px;
 color: white;
 text-align: center;
 border-radius: 10px;
 border: 1px solid #111;
 box-shadow: 1px 1px 2px #202020;          /* Internet 9+ 以及 Chrome 全面支持 */
 -moz-box-shadow: 1px 1px 2px #202020;     /* Old Firefox   */
 -webkit-border-shadow: 1px 1px 2px #202020;   /*  Safari 默认在标签前面加 -webkit- */
 text-shadow: 0px 0px 10px #fff;
 z-index:10;
 display: none;
 font-family:黑体;
 font-size:15px;
 cursor:pointer;
}
/*  这个是用来显示冒泡小三角的div样式   */    
.tip-bubble:after {
 content: '';
 position: absolute;
 width: 333px;
 height: 0;
 border: 15px solid;
}
    
/* 以下是4种显示方式（上、右、下、左） */

.tip-bubble-top:after {
 border-bottom-color: #202020;
 left: 50%;
 bottom: 100%;
 margin-left: -15px;
}
.tip-bubble-right:after {
 border-left-color: #202020;
 left: 100%;
 top: 50%;
 margin-top: -15px;
}
    
.tip-bubble-bottom:after {
 border-top-color: #202020;
 top: 100%;
 left: 50%;
 margin-left: -15px;
}
    
.tip-bubble-left:after {
 border-right-color: #202020;
 top: 50%;
 right: 100%;
 margin-top: 150px;
}
</style>