今天在DIY一个时光机的页面,我本身CSS技能偏弱,在页面调整方面耗时较多。为了页面美观,我还设计了一个气泡样式,每条微语一个气泡框,气泡样式实现的效果如下:

气泡样式的实现原理其实就是一个圆角矩形加上一个三角形,圆角矩形直接定义样式即可:

    .time-row {
        background: #1abc9c14;
        padding: 0.625rem 0.75rem;
        overflow: hidden;
        border-radius: 0.35rem;
        margin-left: 10px;
    }

三角形的处理这里需要用到四个CSS知识点:

  1. :after:伪元素
  2. position: absolute:绝对定位
  3. 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-widthborder-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>

加油,继续学习!

Last modification:June 8th, 2020 at 06:54 pm
If you think my article is useful to you, please feel free to appreciate