以前只知道outline可以不占用流体空间实现焦点，边框效果。偶然间看到一篇外网文章，打开了新世界的大门。原来outline还可以玩这么多花样。

动画一

通过将outline-ofset负偏移达到遮罩效果，再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单

代码如下：

  <style>
    .outline{
      --width: 200px;
      outline: calc(var(--width) / 2) solid rgba(0, 0, 0, 0.3);
      outline-offset: calc(var(--width) / -2);
      transition: 0.3s;
    }
    .outline:hover{
      outline: 8px solid #60656f;
      outline-offset: 10px;
      cursor: pointer;
    }
  </style>
  <img class="outline" src="./01.jpg">

动画二(结合clip-path)

一个五角星的遮罩效果，还是很酷的。使用了clip-path裁剪了一个五角星的区域，其它原理同上。

代码如下：

  <style>
    .outline{
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      outline: 100vmax solid rgba(0, 0, 0, 0.8);
      outline-offset: -100vmax;
      transition: 0.3s;
    }
    .outline:hover{
      outline-color: #0000;
      cursor: pointer;
    }
  </style>
  <img class="outline" src="./01.jpg" alt="test">

动画三(clip-path, mask)

这个就相对复杂了一些，在使用了clip-path十裁剪出心形下半截的的同时还要使用mask-box-image来裁剪出心形的上半部分。

代码如下：

  <style>
    .outline{
      width: 250px;
      aspect-ratio: 1;
      object-fit: cover;
      --_m: radial-gradient(#000 69%,#0000 70%) 84.5% fill/100%;
      -webkit-mask-box-image: var(--_m);
                mask-border: var(--_m);
      clip-path: polygon(-41% 0,50% 91%, 141% 0);
      outline: 100vmax solid #ff3e60;
      outline-offset: -100vmax;
      transition: .7s;
      cursor: pointer;
    }
    .outline:hover{
      outline-color: #0000;
      cursor: pointer;
    }
  </style>
  <img class="outline" src="./01.jpg" alt="test">

动画四

这个更炫酷了有没有。相对实现代码也更复杂一些。使用了mask属性，这个属性和cliip-path类似，但更强大。马上会写专门的文章介绍。

代码如下：

  <style>
    .outline{
      --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
      --m:
        left   var(--_i,0%) top    var(--_g),
        bottom var(--_i,0%) left   var(--_g),
        top    var(--_i,0%) right  var(--_g),
        right  var(--_i,0%) bottom var(--_g);
      -webkit-mask: var(--m);
              mask: var(--m);
      outline: 100vmax solid #374348;
      outline-offset: -100vmax;
      transition: .3s linear;
      cursor: pointer;
    }
    .outline:hover{
      --_i: 10%;
      outline-color: #0000;
    }
  </style>
  <img class="outline" src="./01.jpg" alt="test">

动画五

这个可以看作是第一个动画的进阶版，在outline上又加入了线性渐变(那个交叉边框的实现)

代码如下:

<style>
img {
  --s: 15px;  /* size of the frame */
  --b: 2px;   /* border thickness */
  --w: 200px; /* width of the image */
  --c: #7B3B3B;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
  background:
    linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
    linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
  outline: calc(var(--w)/2) solid #0009;
  outline-offset: calc(var(--w)/-2 - 2*var(--s));
  transition: .4s;
  cursor: pointer;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: calc(var(--s)/-2);
  --_i: calc(100% - 2*var(--s));
}  
</style>
<img class="outline" src="./01.jpg" alt="test">

动画六

既然有了线性渐变动画，那也有径向渐变动画：

这代码不难理解，只是复杂度较高。认真看看还是可以看懂的。

代码如下：

<style>
img {
  border-radius: 50%;
  cursor: pointer;
  padding: 40px;
  clip-path: circle(calc(50% - 40px));
  --_p: 100px;
  --_g1: radial-gradient(50% 50%,#e71e24 90%,#0000); /* color 1 */
  --_g2: radial-gradient(50% 50%,#fcc010 90%,#0000); /* color 2 */
  --_g3: radial-gradient(50% 50%,#85c341 90%,#0000); /* color 3 */
  --_g4: radial-gradient(50% 50%,#eb2288 90%,#0000); /* color 4 */
  background:
     var(--_g1) calc(20% - var(--_p)) calc(20% - var(--_p)),
     var(--_g2) calc(80% + var(--_p)) calc(8%  - var(--_p)),
     var(--_g3) calc(88% + var(--_p)) calc(82% + var(--_p)),
     var(--_g3) 55%                   calc(8% - var(--_p)),
     var(--_g1) calc(18% - var(--_p)) calc(91% + var(--_p)),
     var(--_g2) calc(10% - var(--_p)) calc(70% + var(--_p)),
     var(--_g2) calc(95% + var(--_p)) 40%,
     var(--_g1) calc(82% + var(--_p)) calc(28% - var(--_p)),
     var(--_g4) calc(12% - var(--_p)) 30%,
     var(--_g4) 65%                   calc(94% + var(--_p)),
     var(--_g3) calc(20% - var(--_p)) calc(10% - var(--_p)),
     var(--_g4) calc(42% - var(--_p)) calc(91% + var(--_p));
  background-size: 15px 15px, 20px 20px, 30px 30px;
  background-repeat: no-repeat;
  outline: 150px solid #0005;
  outline-offset: -150px;
  transition: .5s;
}
img:hover {
  clip-path: circle(80%);
  outline: 3px solid #EF746F;
  outline-offset: 0;
  --_p: 0px;
}
</style>
<img class="outline" src="./01.jpg" alt="test">