纯css实现边框环绕的效果-526互联

最近做项目遇到一个需求，需要给卡片添加一个边框环绕的效果，当鼠标移入卡片时，出现边框。
这里我主要是使用:before 和 :after来辅助实现这个功能。
在很多时候，我们可以巧用:before 或者 :after 来实现一些看起来较为复杂的效果。
我们先看看效果：

代码如下，希望大家能受到些许的启发，能在自己的项目中也运用起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
      <div class="border-line"></div>
    </div>
    <style>
    .box {
      width: 260px;
      height: 100px; 
      margin: auto;
      position: relative;
      box-sizing: border-box;
    }

    .border-line {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      transition: all 0.6s ease-in;
      box-sizing: border-box;
    }

    .border-line:before {
      bottom: 0;
      right: 0;
      -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
      transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
    }

    .border-line:after {
      top: 0;
      left: 0;
      -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
      transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
    }

    .border-line:before,
    .border-line:after {
      content: '';
      display: block;
      position: absolute;
      box-sizing: border-box;
      border: 3px solid transparent;
      width: 0;
      height: 0;
    }

    .border-line:hover {
      border: 1px solid green;
    }

    .border-line:hover:before {
      border-bottom-color: green;
      border-left-color: green;
      -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
      transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
    }

    .border-line:hover:after {
      border-top-color: green;
      border-right-color: green;
      -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
      transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    }

    .border-line:hover:before,
    .border-line:hover:after {
      border-width: 3px;
      width: 100%;
      height: 100%;
    }
  </style>
</body>
</html>