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>

そして、それを他の要素にするには、点線の div と他の div でunder遊ぶ必要があります (それらは のより高い値を持つ必要があります)z-indexz-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 にはいくつかのタイプしかないか、通常のドットが 1 つしかないためです。

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

Photoshop で幅 1 ピクセルの PNG 画像を目的のパターンで作成し、次の<body>ように要素の背景 (または CSS3 の複数の背景画像の 1 つ) として設定します。

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

data:URI を使用するか、繰り返される高さ 2px の CSS3 グラデーションを作成することで、おそらく画像ファイルなしでこれを行うことができます。

于 2012-09-15T02:50:35.773 に答える