如何使用 CSS 在页面中心绘制一条垂直的虚线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12434102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a vertical, dotted line down center of page using CSS?
提问by Chaddeus
I'd like to draw a dotted line, vertically down the center of my page, "hiding" under any content boxes along the way... Is there a technique to do this in CSS, or will I have to use a repeating image?
我想画一条虚线，垂直向下我的页面中心，沿途“隐藏”在任何内容框下......是否有一种技术可以在CSS中做到这一点，或者我必须使用重复的图像?
回答by banzomaikaka
This gives you dots: http://jsfiddle.net/NBMRp/
这给你点：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*/
}
They're just not that pretty.
他们只是没有那么漂亮。
回答by Majid Laissi
For the dotted line i would use:
对于虚线，我会使用：
.vertical_dotted_line
{
border-left: 1px dotted black;
height: 100px;
}
<div class="vertical_dotted_line"></div>
And to make it underother elements you need to play with the z-indexof your dotted line div and the other divs (they should have a bigged value of z-index)
并使其成为under您需要使用z-index虚线 div 和其他 div 的其他元素（它们的值应该为z-index）
回答by NullPoiиteя
This can be done either by repeating image or CSS depending on what type of dot you want since CSS has only few types or even single normal dot.
这可以通过重复图像或 CSS 来完成，具体取决于您想要什么类型的点，因为 CSS 只有几种类型甚至单个普通点。
With CSS you can do this by either making the border left or right.
使用 CSS，您可以通过使边框向左或向右来实现。
For example
例如
<div class="one"></div>
<div class="tow"></div>
CSS
CSS
.one{
width: 50%;
border-right: 1px dotted red;
}
and with image
并带有图像
body{
background-image: url("dotted.png") repeat-y center top;
}
回答by Dai
Create a 1px-wide PNG image in Photoshop with the desired pattern, then set it as the background (or one of multiple background images in CSS3) of the <body>element, like so:
在 Photoshop 中使用所需的图案创建一个 1px 宽的 PNG 图像，然后将其设置为<body>元素的背景（或 CSS3 中的多个背景图像之一），如下所示：
body {
background-image: url("dottedLine.png") repeat-y center top;
}
You can probably do this without image files by either using a data:URI or creating a 2px-tall CSS3 gradient that is repeated.
您可以通过使用data:URI 或创建重复的 2px 高 CSS3 渐变，在没有图像文件的情况下执行此操作。
回答by Wasim Khan
If you wants the lines should extend out of div's height -
如果你想要线条应该延伸出 div 的高度 -
.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;
}
}
