纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯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;
}
下面一步一步实现给该tooltip整体添加边框：
首先HTML代码：
<body>
<div class="demo"></div>
</body>
让我们来设置盒子的样式
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
</style>
截图：
(其中具体的position的设定缘由大家看前一篇的解释，谢谢~~)
接着“引入”箭头，注意这里要同时用到“ :after ”和“ :before ”两个CSS选择器同时产生不同尺寸的箭头，基本样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
height:20px;
width:20px;
background:yellow;
}
.demo:before{
height:30px;
width:30px;
background:green;
}
</style>
截图：
继续，我们要给黄色方块和绿色方块设置边框，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
height:20px;
width:20px;
background:yellow; border:5px solid lightgreen;
}
.demo:before{
height:30px;
width:30px;
background:green; border:5px solid red;
}
</style>
截图：
再者我们将黄色方块和绿色方块内容去掉，通过去掉:after和:before的height、width，仅剩下浅绿色方框和红色方框，分别是黄色方块、绿色方块的边框，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
//height:20px;
//width:20px;
background:yellow; border:5px solid lightgreen;
}
.demo:before{
//height:30px;
//width:30px;
background:green; border:5px solid red;
}
</style>
截图：
这里注意红色的边框被覆盖了，所以我们需要给浅绿色方块和红色方块增加像素，但是增加的像素值彼此不相同，为后续做准备，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
//height:20px;
//width:20px;
background:yellow; border:10px solid lightgreen;
}
.demo:before{
//height:30px;
//width:30px;
background:green; border:15px solid red;
}
</style>
截图：
注意，这里我们将浅绿色的边框像素值由5px改为了10px；而红色边框由5px改为了15px,如上图，但值得小心的是区分这里的浅绿色方框、红色方框与上面的黄色方块、绿色方块样子相同，但性质却截然不同，一种是边框，一种是方块~~而实现箭头是通过边框来实现的，原理参见上一篇纯CSS实现tooltip提示框，CSS箭头及形状
下面来实现箭头，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
//height:20px;
//width:20px;
//background:yellow; //border:10px solid lightgreen;
border:10px solid transparent;
border-top-color:lightgreen;
}
.demo:before{
//height:30px;
//width:30px;
//background:green; //border:15px solid red;
border:15px solid transparent;
border-top-color:red;
}
</style>
截图：
然后我们通过position:absolute的top、right、bottom、left，以下简称TRBL来设置箭头及边框（这里指红色边框，即将成为箭头的边框）的位置，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
//height:20px;
//width:20px;
//background:yellow; //border:10px solid lightgreen;
border:10px solid transparent;
border-top-color:lightgreen;
top:100px;
left:20px;
}
.demo:before{
//height:30px;
//width:30px;
//background:green; //border:15px solid red;
border:15px solid transparent;
border-top-color:red;
top:100px;
left:15px;
}
</style>
截图：
接着来设置灰色盒子的边框为红色，边框大小与红色相同，同时将箭头浅绿色改为灰色，使其看起来浑然一体，样式：
<style>
.demo{
background-color: gray;
height: 100px;
position: relative;
width: 100px;
border:2.75px solid red;
}
.demo:after,.demo:before{
content:'';
position:absolute;
}
.demo:after{
//height:20px;
//width:20px;
//background:yellow; //border:10px solid lightgreen;
border:10px solid transparent;
border-top-color:gray;
top:100px;
left:20px;
}
.demo:before{
//height:30px;
//width:30px;
//background:green; //border:15px solid red;
border:15px solid transparent;
border-top-color:red;
top:100px;
left:15px;
}
</style>
截图：
其中灰色盒子的边框2.75px与箭头边框红色部分的宽度计算，大家自己捉摸捉摸哈~~数学问题！
至此，我们的续写，给“tooltip提示框”添加个边框到此结束！具体颜色样式大家可以随自己要求自己做修改~~
更多知识分享：微笑空间站
纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框的更多相关文章
- 纯CSS实现tooltip提示框，CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 修改Tooltip 文字提示 的背景色 箭头颜色
3==>vue 鼠标右击<div @contextmenu.prevent="mouseRightClick">prevent是阻止鼠标的默认事件 4==> ...
- 点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
- 清除Css中select的下拉箭头样式
select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- 不刷新改变URL: pushState + Ajax
如果你玩过Google+,看到过YouTube的新界面,便会体验到这个HTML5的新功能.使用pushState + Ajax(pjax),可以实现网页的ajax加载,同时又能完成URL的改变而没有网 ...
- CentOS6.4 增加一个SFTP上传的用户
#创建sftp组 groupadd sftp #创建一个用户dsideal useradd -g sftp -s /bin/false dsideal #设置dsideal用户的密码 passwd d ...
- [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...
- win8.1上wamp环境中利用apache自带ab压力测试工具使用超简单讲解
2015.10.4apache自带ab压力测试工具使用:本地环境:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一 ...
- Hibernate4Maven
How to create a Maven project with Hibernate libs? This blog will be a demo to describe this issue. ...
- 深入浅出 - Android系统移植与平台开发（九）－ JNI介绍
作者:唐老师,华清远见嵌入式学院讲师. JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官 ...
- XML参考 ：XmlReader 详解、实例
XML参考 :XmlReader 详解.实例-- 详解 转:http://www.cnblogs.com/Dlonghow/archive/2008/07/28/1252191.html XML参考 ...
- C#中Thread.sleep() 【转载】
我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题: 1.假设现在是 2008-4-7 12:00:00.000,如果我 ...
- css去掉使用bootstrap框架后打印网页时预览效果下的超链接
在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...
- 【androidstudio】将eclipse的项目导入android studio
一.概述 最近正在实习公司迭代一个app,项目工程比较大,依赖的第三方服务.第三方库较多,比较复杂.因为公司项目一直是在ec上写的,没有android studio的版本.而大家都知道ec写代码远没有 ...