纯CSS制作环绕边框特效，边框周围会有两条类似贪吃蛇一样的线条环绕边框一直旋转，可以在制作网页的时候利用下面的样式代码增加一些个人网站的个性化。

使用方法

在HTML中加入下面关键样式，在需要添加环绕边框特效的地方加上special的class即可实现。

CSS样式

    <style>
        /* 修改宽高调整盒子大小 */
        body {
            background-color: black;
        }

        .special {
            width: 200px;
            height: 50px;
            color: #69ca62;
            /* 外面围绕的边框是真边框，眼睛看见的边框是阴影效果 */
            box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
            background-color: #0f222b;
        }

        .special {
            text-align: center;
            margin: 100px auto;
        }

        .special, .special::before, .special::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .special::before, .special::after {
            content: '';
            margin: -5%;
            box-shadow: inset 0 0 0 2px;
            animation: clipMe 8s linear infinite;
        }

        .special::before {
            animation-delay: -4s;
        }

        /* 核心：更改宽高后这下面的动画效果也需修改 */

        @keyframes clipMe {
            0%, 100% {
                /* 上 右 下  左*/
                /* 上-下=-2px，右-右=220px 显示盒子上边框 */
                clip: rect(0px, 220.0px, 2px, 0px);
            }
            25% {
                /* 上-下=-70px，右-右=2px 显示盒子左边框 */
                clip: rect(0px, 2px, 70.0px, 0px);
            }
            50% {
                /* 上-下=-2px，右-右=220px 显示盒子下边框 */
                clip: rect(68.0px, 220.0px, 70.0px, 0px);
            }
            75% {
                /* 上-下=-70px，右-右=2px 显示盒子右边框 */
                clip: rect(0px, 220.0px, 70.0px, 218.0px);
            }
        }

        .special a {
            font-size: 20px;
            line-height: 50px;
            text-decoration: none;
            color: #404d5b;
        }

    </style>

HTML结构

<div class="special">
    <a href="###">环绕边框特效</a>
</div>