Html 如何消除线性渐变线的模糊

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: repeating-linear-gradient(45deg, #1c71b8, #1c71b8 10px, #5fb5fc 10px, #5fb5fc 20px);
}

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

#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% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 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>

#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>

#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>

Html相关问答推荐

如何使用css为动态用户输入矩阵添加背景色？

为什么我的网页底部是蓝色背景而不是渐变色？

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素？

窗口视图之外的下拉菜单位置

CSS：双面元素未正确显示边框

Flex：第一个 div 有列，下一个 div 有行

margin-top 未应用于无序列表的第一项

无法在 CSS 中将 h1 标签居中

如何实现与内嵌图像对齐的自动换行？

如何正确地嵌套Flexbox

如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ？

单击时 HTML 锚元素不重定向到相对路径

我如何让这个动画播放，然后停止，然后在设定的时间后再次播放？ (CSS)

防止 HTML 表格在 Quarto 中使用全页宽度

为什么相同持续时间的转换需要不同的时间？

使用 CSS 样式化进度条

在部分而不是正文中定义页面宽度

列宽等于最宽列宽度的无界容器

文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号

表格布局：固定；文本溢出单元格时不起作用