css 边框

边框发光:

      box-shadow: rgb(194, 235, 235) 0px 0px 10px;

box-shadow参数解释：

阴影方式，可选， inset内阴影，否则默认外阴影；

x-offset相对X轴的偏移量: 0;

y-offset相对Y轴的偏移量：-5px;

blur 模糊值：8px；

 扩展阴影半径：spread, 可选，但是实现边框阴影不同效果就考它了；
 阴影的颜色：rgba(81,81,81,0.8) 其中a是指透明度alpha

position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
    }
    i {
      position: absolute;
      display: inline-block;
      height: 100%;
      width: 1px;
    }
    &::before {
      top: 0;
      left: -100%;
      background-image: linear-gradient(
        90deg,
        transparent,
        #03e9f4,
        transparent
      );
 
      animation: one 4s linear infinite;
    }
    i:nth-child(1) {
      top: -100%;
      right: 0;
      background-image: linear-gradient(
        180deg,
        transparent,
        #03e9f4,
        transparent
      );
      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
      animation: two 4s linear 1s infinite;
    }
    &::after {
      bottom: 0;
      right: -100%;
      background-image: linear-gradient(
        -90deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: three 4s linear 2s infinite;
    }
    i:nth-child(2) {
      bottom: -100%;
      left: 0;
      background-image: linear-gradient(
        360deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: four 4s linear 3s infinite;
    }
 

给你一个按钮流光特效 颜色自己调

  .inorup {
    position: absolute; /*绝对对位*/
    top: 50%; /*距上部*/
    left: 50%;
    transform: translate(-50%, -50%); /*移动，根据X,Y轴*/
    width: 180px; /*宽*/
    height: 50px; /*高*/
    text-align: center; /*字体水平居中*/
    font-size: 15px; /*字体大小*/

    color: #fff;
    text-transform: uppercase; /*字体大写*/
    text-decoration: none; /*字体增加装饰：去除下划线*/
    font-family: sans-serif; /*非衬线体*/
    box-sizing: border-box; /*盒模型大小规则*/
    background: linear-gradient(
      90deg,
      #0a032e,
      #2f0572,
      #370686,
      #41069e,
      #580ad4,
      #6316df,
      #722ee0
    ); /*渐变背景*/
    border-radius: 60px; /*边框圆角*/
    background-size: 400%; /*背景大小*/
    z-index: 1; /*层叠定位*/

    &:hover {
      animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
    }
    @keyframes animate {
      0% {
        background-position: 0%; /*修改背景定位，实现渐变色炫光*/
      }
      50% {
        background-position: 100%;
      }
      100% {
        background-position: 0%;
      }
    }
    &::before {
      /*之前添加*/
      content: ""; /*内容*/
      position: absolute; /*绝对定位*/
      top: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
      left: -5px;
      right: -5px;
      bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
      z-index: -1;
      background: linear-gradient(
        90deg,
        #0a032e,
        #020203,
        #310e69,
        #ff7af0,
        #580ad4,
        #6316df,
        #560289
      );
      border-radius: 40px;
      background-size: 400%;
      filter: blur(20px); /*过渡：模糊*/
      opacity: 0; /*透明度*/
      transition: 1s; /*过渡时间*/
    }
    &:hover::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite; /*注意动画名称统一*/
    }
  }

四角边框 css

    .sijiao {
      padding: 10px;
      background: linear-gradient(to top, #306eef, #306eef) left top no-repeat,
        /*上左*/ linear-gradient(to right, #306eef, #306eef) left top no-repeat,
        /*左上*/ linear-gradient(to left, #306eef, #306eef) right top no-repeat,
        /*上右*/ linear-gradient(to bottom, #306eef, #306eef) right top
          no-repeat,
        /*上右*/ linear-gradient(to left, #306eef, #306eef) left bottom
          no-repeat,
        /*下左*/ linear-gradient(to bottom, #306eef, #306eef) left bottom
          no-repeat,
        /*左下*/ linear-gradient(to top, #306eef, #306eef) right bottom
          no-repeat,
        /*下右*/ linear-gradient(to left, #306eef, #306eef) right bottom
          no-repeat; /*右下*/
      background-size: 2px 66px, 66px 2px, 2px 66px, 66px 2px;
    }