css实现简单蒙层与气泡

蒙层可用于自定义弹出框的阴影，以及数据加载等。

<div class="mask"></div>
// 蒙层
.mask {
background-color: rgba(0,0,0,.5);
position: fixed;
opacity: 0.8;
z-index: 999999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

气泡可用于新手提示，以及注意事项提示等。

<div class="tooltip-box">重庆</div>
// 气泡箭头
.tooltip-box:before{
content: "";
position: absolute;
right: 100%;
top: 16px;
left: 20%;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #ccc;
}
// 气泡泡
.tooltip-box:after{
content: "夜景";
position: absolute;
right: 100%;
top: 26px;
left: 14%;
width: 34px;
height: 16px;
border: 1px solid #fff;
border-radius: 4px;
}

最后

以上就是体贴老鼠为你收集整理的css实现简单蒙层与气泡的全部内容，希望文章能够帮你解决css实现简单蒙层与气泡所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。