文字边框环绕效果的实现方式

作者: 年轻时的普朗克 | 来源:发表于2018-12-09 21:34 被阅读0次

文字边框环绕效果的实现方式
iOS 文字环绕题的一些探究
不规则的文字环绕问题
float浮动对文本元素排版影响
通过 div 的方式实现比 1px 还细的横线 - html
微信小程序实现文本的展开与收起
Flutter 边框阴影
Android 日志工具包
CSS Float
float

最近有人要我帮做一个字段拖拽编辑功能的页面，由于页面上可编辑的字段有些多，那么如何突出显示当前正在被编辑的字段而不影响其编辑样式呢？于是我就脑洞大开地想到了边框环绕。

1、用原始虚线边框来实现边框环绕

css原始边框不支持环绕，于是我就想到了利用虚线边框加动画的方式来实现边框环绕。主要思路是被环绕的元素里面放四个额外的子元素，利用他们来做边框。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        div>span {
            position: absolute;
        }
        span:nth-of-type(1) {
            width: 200%;
            height: 1px;
            top: 0;
            right: 0;
            box-sizing: border-box;
            border-top: 1px dashed #333;
            animation: flash1 8s infinite linear;
        }
        span:nth-of-type(2) {
            width: 200%;
            left: 0;
            height: 1px;
            bottom: 0;
            box-sizing: border-box;
            border-top: 1px dashed #333;
            animation: flash2 8s infinite linear;
        }
        span:nth-of-type(3) {
            height: 200%;
            width: 1px;
            left: 0;
            top: 0;
            box-sizing: border-box;
            border-right: 1px dashed #333;
            animation: flash3 8s infinite linear;
        }
        span:nth-of-type(4) {
            height: 200%;
            bottom: 0;
            width: 1px;
            right: 0;
            box-sizing: border-box;
            border-right: 1px dashed #000;
            animation: flash4 8s infinite linear;
        }
        @keyframes flash1 {
            0% {
                right: 0;
            }
            100% {
                right: -100%;
            }
        }
        @keyframes flash2 {
            0% {
                left: 0;
            }
            100% {
                left: -100%;
            }
        }
        @keyframes flash3 {
            0% {
                top: 0;
            }
            100% {
                top: -100%;
            }
        }
        @keyframes flash4 {
            0% {
                bottom: 0;
            }
            100% {
                bottom: -100%;
            }
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

然而这种方式的效果并不好，于是我想到了用canvas来画虚线作为边框。

2、用canvas画边框来实现边框环绕

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        div>canvas {
            position: absolute;
        }
        canvas:nth-of-type(1) {
            top: 0;
            right: 0;
            animation: flash1 12s infinite linear;
        }
        canvas:nth-of-type(2) {
            right: 0;
            bottom: 0;
            animation: flash2 12s infinite linear;
        }
        canvas:nth-of-type(3) {
            left: 0;
            bottom: 0;
            animation: flash3 12s infinite linear;
        }
        canvas:nth-of-type(4) {
            top: 0;
            left: 0;
            animation: flash4 12s infinite linear;
        }
        @keyframes flash1 {
            0% {
                right: 0;
            }
            100% {
                right: -100%;
            }
        }
        @keyframes flash2 {
            0% {
                bottom: 0;
            }
            100% {
                bottom: -100%;
            }
        }
        @keyframes flash3 {
            0% {
                left: 0;
            }
            100% {
                left: -100%;
            }
        }
        @keyframes flash4 {
            0% {
                top: 0;
            }
            100% {
                top: -100%;
            }
        }
    </style>
</head>
<body>
    <div id="fa">666
        <canvas id="canvas1" height="1" ></canvas>
        <canvas id="canvas2" width="1" ></canvas>
        <canvas id="canvas3" height="1" ></canvas>
        <canvas id="canvas4"  width="1"></canvas>
    </div>
    <script>
        Array.from(document.querySelectorAll('canvas')).forEach((_, i) => {            
            i % 2 === 0 ? _.width = 400 : _.height = 400;
            let ctx = _.getContext('2d');
            ctx.strokeStyle = '#000';
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            i % 2 === 0 ? ctx.lineTo(_.width, 0) : ctx.lineTo(0, _.height);
            ctx.stroke();
        });
    </script>
</body>
</html>

注意为了确保四条边移动的速度一致，四条边的动画移动距离和执行动画的时间的比例要相等，不懂的话全部写成一样就行了。