20

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

4

5 回答 5

31

这给了你点：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*/
}

他们只是没那么漂亮。

于 2012-09-15T02:49:28.390 回答
6

对于虚线，我将使用：

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

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

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

于 2012-09-15T02:47:09.263 回答
2

如果您希望线条超出 div 的高度 -

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

}

于 2015-11-04T14:20:31.970 回答
0

这可以通过重复图像或 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;
}
于 2012-09-15T02:49:15.553 回答
0

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

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

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

于 2012-09-15T02:50:35.773 回答