在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状
不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状):
首先像:after一样我们介绍另外一个CSS中“ :before ”选择器
定义和用法:(参考w3school:before选择器)
:before 选择器在被选元素的内容前面插入内容,使用 content 属性来指定要插入的内容
例:
p:before
{
content:"台词:-";
background-color:yellow;
color:red;
font-weight:bold;
}
View Code
下面一步一步实现给该tooltip整体添加边框:
首先HTML代码:
<body>
<div class="demo"></div>
</body>
View Code
让我们来设置盒子的样式
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
</style>
View Code
截图: