如何使用 CSS 在页面中心向下绘制垂直虚线？答案

【问题标题】：How to draw a vertical, dotted line down center of page using CSS?如何使用 CSS 在页面中心向下绘制垂直虚线？
【发布时间】：2021-10-07 01:49:45
【问题描述】：

我想在我的页面中心垂直向下画一条虚线，沿途“隐藏”在任何内容框下......有没有一种技术可以在 CSS 中做到这一点，或者我必须使用重复的图像？

【问题讨论】：

圆点应该是怎样的？

标签： css

【解决方案1】：

这会给你点：http://jsfiddle.net/NBMRp/

body:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #444; /*change these values to suit your liking*/
}

他们只是没那么漂亮。

【讨论】：

没有图像请求的好解决方案

【解决方案2】：

对于虚线我会使用：

.vertical_dotted_line
{
    border-left: 1px dotted black;
    height: 100px;
} 

<div class="vertical_dotted_line"></div>

要使其成为 under 其他元素，您需要使用虚线 div 的 z-index 和其他 div（它们应该具有更高的 z-index 值）

【讨论】：

它应该只是黑色而不是#black
@CarlAmbroselli 确实是 :)

【解决方案3】：

如果你想让线条超出 div 的高度 -

.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;

}

【讨论】：

【解决方案4】：

在 Photoshop 中使用所需图案创建一个 1 像素宽的 PNG 图像，然后将其设置为 <body> 元素的背景（或 CSS3 中的多个背景图像之一），如下所示：

body {
    background-image: url("dottedLine.png") repeat-y center top;
}

您可以在没有图像文件的情况下通过使用data: URI 或创建重复的 2 像素高的 CSS3 渐变来做到这一点。

【讨论】：

【解决方案5】：

这可以通过重复图像或 CSS 来完成，具体取决于您想要什么类型的点，因为 CSS 只有少数类型甚至单个普通点。

使用 CSS，您可以通过使边框向左或向右来做到这一点。

例如

<div class="one"></div>
<div class="tow"></div>

CSS

.one{
  width: 50%;
  border-right: 1px dotted red;
}

还有图片

body{
  background-image: url("dotted.png") repeat-y center top;
}

【讨论】：