女朋友都喜欢的CSS特效：clip-path边框

这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

大家好，我叫小杜杜，我们知道构成前端的三大语言有： html 、 css 和 js ，其中最为神秘的便是 css ，为什么这么说呢？自从动画、过度等属性的出现，可以说只有你想不到，就没有做不到～

今天来看看一个特别神奇的属性： clip-path

clip-path

clip-path ：裁剪，新的裁剪，与 clip 相同，只不过 clip 是老裁剪，并且要 absolute 和 fixed 定位元素才能使用，并且智能裁剪正方形，这里就不多做赘述，我们直接看 clip-path 就行

clip-path 对元素的定位没有要求，而且也能裁剪更多的元素

用法： clip-path: inset(bottom, right, top, left)

我们来看看裁剪：

我们发现 clip-path 的裁剪是 挤压 ，现在来看看 clip-path 的神奇特效吧

边框线条特效

我们先随便写段文字，添加上背景色，注意，不要对文字限制宽度，可以用 padding ,这样就能适应文字长度了。像这样

    div{
        background: rebeccapurple;
        line-height: 30px;
        padding: 0 20px;
        color: #fff;
        border-radius: 5px;
我们现在需要在此处添加一个边框，我们可以利用 after,在通过定位，在通过top等设置边距,如·：
    div{
        position: relative;
        &::after{
            content: "";
            border: 2px solid rebeccapurple;
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
clip-path的流动：
经过上面的介绍，我们可以通过 clip-path: inset(bottom, right, top, left)来设定
我们随变写一个值看看效果： clip-path: inset(96% 0 0 0)
我们要做成动画，假设从上往下，所以应该是初始值为top => right => bottom => left, 在分别设置 25% 50% 75%三个值
div{
    &&:after{
        animation: clippath 3s infinite linear;
@keyframes clippath {
  100% {
      clip-path: inset(0 0 96% 0);
  25% {
      clip-path: inset(0 96% 0 0);
  50% {
      clip-path: inset(96% 0 0 0);
  75% {
      clip-path: inset(0 0 0 96%);
双流动特效
除了 after我们还有个before，同时设置延迟时间，防止重合，就OK了,对了，要想让按钮触碰高亮效果可以用filter: contrast()这个属性，参照大佬的，大佬yyds~
我们发现颜色还是太单调了,还是使用老生常谈的颜色filter: hue-rotate()，为了更加好看也可以加入渐变色
当然我们也可以给图片加入边框，效果变成了这样
// html
 <div className="Index">
    <div>clip-path: inset 的神奇特效</div>
.Index{
  display: flex;
  justify-content: center;
  padding-top: 100px;
  div{
    background: rebeccapurple;
    position: relative;
    line-height: 30px;
    padding: 0 20px;
    color: #fff;
    border-radius: 5px;
    &:hover {
        filter: contrast(1.1);
    &:active {
        filter: contrast(0.9);
    &::before,
    &::after{
        content: "";
        border: 2px solid;
        border-image: linear-gradient(45deg, gold, deeppink) 1;
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        animation: clippath 3s infinite ;
    &::before{
        animation: clippath 3s infinite -1.5s linear;
@keyframes clippath {
  100% {
      clip-path: inset(0 0 96% 0);
      filter: hue-rotate(0deg);
  25% {
      clip-path: inset(0 96% 0 0);
  50% {
      clip-path: inset(96% 0 0 0);
      filter: hue-rotate(360deg);
  75% {
      clip-path: inset(0 0 0 96%);
参考：clip-path 实现边框线条动画 2
不得不说css真的很神奇，最神秘的莫过于css，喜欢的点个赞👍🏻支持下吧(●￣(ｴ)￣●)