如何增加虚线边框点之间的空间并在它们之间书写答案

【问题标题】：How to increase space between dotted border dots and write between them如何增加虚线边框点之间的空间并在它们之间书写
【发布时间】：2021-05-08 16:04:12
【问题描述】：

我在我的框中使用虚线样式边框，例如

 body {
  background-color: black;
}
.box {
  height: 100vh;
  background-image: linear-gradient(to bottom, #ffffff 10%,rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px; 
  background-repeat: repeat-y;
}

如何在点之间书写？

示例图片：

【问题讨论】：

我不知道你为什么需要增加点之间的空间 - 你能把它们写下来吗？

标签： html css

【解决方案1】：

这是一种不需要点中“间隙”的方法 - 我们只需在它们上面写字（黑色背景和一点填充，具体取决于您想要的内容）。

如果没有更多关于文本间距所需的确切信息，不可能更具体，但是这种使用旋转文本和每个“块”文本的不同元素的布局希望能给你一个开始。

 body {
  background-color: black;
}
.box {
  height: 100vh;
  background-image: linear-gradient(to bottom, #ffffff 10%,rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px; 
  background-repeat: repeat-y;
  position: relative;
}
.text {
  color: white;
  transform: rotate(-90deg);
  transform-origin: 0 center;
  position: absolute;
  background-color: black;
  padding: 5px;
}
.text:nth-child(1) {
  top: 90%;
}
.text:nth-child(2) {
  top: 30%;
}
</style>

<div class="box">
<div class="text">some text</div>
<div class="text">and some more</div>
</div>

【讨论】：