实现渐变边框线

1、最终效果：

2、实现代码：

.login-form::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: var(--border-width);
	border-radius: var(--border-radius);
	background: var(--border-color);
  /* 随便定义一个颜色 */
  --mask-bg: linear-gradient(red, red);
  --mask-clip: content-box, padding-box;
  -webkit-mask-image: var(--mask-bg), var(--mask-bg);
  -webkit-mask-clip: var(--mask-clip);
  /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
  mask-composite: exclude;
  /* 只显示下方遮罩，重合的地方不显示 */
  -webkit-mask-composite: destination-out;
  z-index: -1;
 }


.login-form {
  --border-radius: 1.69rem;
	--border-width: 1.2px;
	--border-color: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(0, 151, 255, 0), rgba(255, 255, 255, 1));
  background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
  border-radius: 1.69rem;
  backdrop-filter: blur(10px);
  width: 33.19rem;
  height: 28.56rem;
  padding: 2rem 3.8rem 3.0rem;
  font-size: 1.25rem;
  .input-icon {
    height: 3.8rem;
    width: 14px;
    margin-left: 2px;
    scale: (1.2);
  }
  .svg-icon {
    fill: white;
  }
}