今天在DIY一个时光机的页面，我本身CSS技能偏弱，在页面调整方面耗时较多。为了页面美观，我还设计了一个气泡样式，每条微语一个气泡框，气泡样式实现的效果如下：
气泡样式的实现原理其实就是一个圆角矩形加上一个三角形，圆角矩形直接定义样式即可：
.time-row {
background: #1abc9c14;
padding: 0.625rem 0.75rem;
overflow: hidden;
border-radius: 0.35rem;
margin-left: 10px;
}三角形的处理这里需要用到四个CSS知识点：
:after：伪元素position: absolute：绝对定位border：边框，没错就是边框
先看整体样式如下：
.time-row:after {
content: '';
height: 0;
width: 0;
position: absolute;
display: block;
border-width: 0.625rem 0.75rem 0.625rem 0;
border-style: solid;
top: 0.8rem;
left: 8px;
border-color: transparent #1abc9c14 transparent;
}这两段样式组合起来就是一个气泡框了。绝对定位好说，伪元素虽然用得少但这俩看看文档也就明白了。但是这个边框，我第一知道还能这么用，好神奇（本人后端狗一枚，前端大神别嫌我菜）。
通常咱们对边框的印象就是给div盒子加个边框线条，但是它还能绘制各种图形出来，比如下面这段代码：
<html>
<head>
<style type="text/css">
body{
margin: 100px
}
.border-test {
height: 0;
width: 0;
border-width: 100px 100px 100px 100px;
border-style: solid;
border-color: #1abc9c #ffc107 #e26d6d #28a745;
}
</style>
</head>
<body>
<div class="border-test"></div>
</body>
</html>效果如下：
这段代码理解了就明白了上面那个三角形是怎么绘制出来的了，首先将div盒子大小绘制为0，然后使用实线边框，再使用 border-width 和 border-color 分别指定四个边框的宽度和颜色，效果就出来了。
回到气泡里的三角形，只看几个关键参数（为了演示更加直观我将边框的宽度数值和颜色做了调整）：
.time-row:after {
content: '';
height: 0;
width: 0;
border-width: 100px 100px 100px 0;
border-style: solid;
border-color: #1abc9c #ffc107 #e26d6d;
}这里指定了上右下三个边框宽度为100px，左边框为0，那么实际效果如下：
看到这里是不是就明白了，开篇展示的气泡样式的那个三角形，就是将红绿两个边框设置为透明，只留下黄色边框效果就出来了。
是不是特别神奇，边框还能这么用。其实用边框用得好，组合起来还可以画出各种各样的神奇的图案出来。
最后，会话气泡完整的代码如下：
<html>
<head>
<style type="text/css">
body {
margin: 100px 100px 100px 200px;
}
.bubble {
background: #0e90d2;
padding: 0.625rem 0.75rem;
overflow: hidden;
border-radius: 10px;
margin-left: 10px;
height: 200px;
}
.border-test {
height: 0;
width: 0;
border-width: 40px 40px 40px 0;
border-style: solid;
border-color: transparent #0e90d2 transparent;
position: absolute;
top: 140px;
left: 170px;
}
</style>
</head>
<body>
<div class="bubble">
<div class="border-test"></div>
</div>
</body>
</html>加油，继续学习！
