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

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中执行此操作，或者我是否必须使用重复图像？

5 个解决方案

#1

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.

他们只是不那么漂亮。

#2

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 under other elements you need to play with the z-index of your dotted line div and the other divs (they should have a bigged value of z-index)

要使其在其他元素下，您需要使用虚线div和其他div的z-index（它们应该具有z-index的较大值）

#3

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图像，然后将其设置为元素的背景（或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.

您可以通过使用数据：URI或创建重复的2px-tall CSS3渐变来在没有图像文件的情况下执行此操作。

#4

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

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

and with image

和图像

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

#5

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;

}

#1