你不需要所有这些颜色停止，你可以简化如下：

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0)   calc(50% - 5px),
             rgba(28, 113, 184, 1) 0 calc(50% + 5px),
             rgba(28, 113, 184, 0) 0),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0)   calc(50% - 5px),
             rgba(28, 113, 184, 1) 0 calc(50% + 5px),
             rgba(28, 113, 184, 0) 0);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

使用CSS变量更好：

#box {
  --c: rgb(28 113 184); /* the color */
  --s: 5px; /* the size */
  
  width: 200px;
  height: 100px;
  border: 1px solid;
  --g: #0000 calc(50% - var(--s)),var(--c) 0 calc(50% + var(--s)),#0000 0;
  background: 
   linear-gradient(to top left ,var(--g)),
   linear-gradient(to top right,var(--g));
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

在渐变的1个色标的过程中，将线条从alpha值0渐变到alpha值1。在这两个值之间，alpha将（确实）变化。因为它们分别是50%-5 px、50%和50%+5 px，所以你有很多像素的alpha值可以改变。你把这种效果叫做模糊。
从线的一个边缘到线的另一个边缘，您希望颜色为单个值。
因此，不是有一个alpha为1的单个stop，而是有两个stop。它们中的每一个将代表线的一个边缘。然后，不是在多个像素上过渡回来，而是立即过渡回来，在相同位置处具有另一个颜色停止。
下面是它在代码中的样子：

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 2.5px),
             rgba(28, 113, 184, 1) calc(50% - 2.5px),
             rgba(28, 113, 184, 1) calc(50% + 2.5px),
             rgba(28, 113, 184, 0) calc(50% + 2.5px),
             rgba(28, 113, 184, 0) 100%);
}

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>