CSSのmask-imageプロパティを利用して、グラデーションの点線を作成します。
デモページはこちら

グラデーションの点線は疑似要素にmask-imageプロパティを適用して作成しますが、まずmask-image適用前の状態を確認します。background: linear-gradientでグラデーションのみ適用されている状態です。

.div-child {
  height: 100px;
  position: relative;
  z-index: 0;
}
.mask-before::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
}

次に、mask-image: repeating-linear-gradientで点線を再現します。背景の青のグラデーションを白と透明のグラデーションでトリミングします。結果、白の部分に青のグラデーションが表示され、透明の部分は色がなくなり点線になります。

mask-positionの初期値は0% 0%なのでdivタグの上部に点線が表示されます。ここでは明示的に、mask-position: topを指定しています。

.mask-top::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
  mask-image: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
  mask-size: 100% 2px;
  mask-repeat: no-repeat;
  mask-position: top;
}

同様に疑似要素afterも追加してmask-position: bottomを指定すればdivタグの下部にも点線が表示できます。

.mask-bottom::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
  mask-image: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
  mask-size: 100% 2px;
  mask-repeat: no-repeat;
  mask-position: bottom;
}

なお、mask-sizeの初期値はauto、mask-repeatの初期値はrepeatです。repeating-linear-gradientはグラデーションが繰り返されるので、mask-repeatはno-repeatを指定しています。