html - 如何创建带有淡入淡出效果的虚线小时

Question

你好，我怎样才能在 html 和 css 中创建像这样在图像上点缀的 hr

虚线小时

Answer 1

为此，您必须依赖多个背景并调整每个背景的背景剪辑。对于背景剪辑，请参阅此处

你可以像这样得到褪色的虚线/虚线边框

.container {
  display:inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border-radius:5px;
  border: 3px dotted #fff;
  background:
   linear-gradient(#fff,#fff) padding-box /* Don't extend this to border */,
   linear-gradient(to right, black, #ab5ca4 49%, white) border-box; /*Border-box is not need as it's the default value*/
}
.dashed {
  border: 3px dashed #fff;
}

<div class="container">
</div>

<div class="container dashed">

</div>

Answer 2

也许这可以帮助

.custom-hr{
  
}

.custom-hr span{
  height:10px;
  width:10px;
  background:#000;
  display:inline-block;
  border-radius:100px;
  opacity:1;
  margin:0 2px;
}

.custom-hr span:nth-child(1){
  opacity: 10;
}

.custom-hr span:nth-child(2){
  opacity: 0.8;
  height:9px;
  width:9px;
}

.custom-hr span:nth-child(3){
  opacity:0.5;
  height:8px;
  width:8px;
}

.custom-hr span:nth-child(4){
  opacity:0.2;
  height:7px;
  width:7px;
}

<div class="custom-hr">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>