css 既有渐变，也有动画背景,管道动态，css边框

.rowLine13{
 background: url("../../assets/images/index/arrowLeft.png") repeat  no-repeat,
          linear-gradient(to bottom, $color11 10%, $color1, $color11 90%);
 animation: moveLeft 5s linear infinite;
}

//动画效果
@keyframes moveLeft {
  0% {
    background-position: 320px center;
  }
  100% {
    background-position: 0px center;
  }
}

边框带阴影

<div class="test-div">
 <img src="https://picsum.photos/200" alt="">
</div>
.test-div{
  /* width:100px; */
  max-width: 100px;
  max-width: min-content;
  min-height: 100px;
  position: relative;
  background: palegreen;
  margin: 20px;
  z-index: 1;
}
.test-div::before{
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #dd3106;
background:linear-gradient(45deg,#89ff00,#010615,#00bcd4);
z-index: -1;
}
.test-div::after{
   content: "";
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg,#89ff00,#010615,#00bcd4);;
   z-index:-2;
   filter: blur(40px);
}