Tôi muốn vẽ một đường chấm chấm, theo chiều dọc xuống giữa trang của tôi, "ẩn" dưới bất kỳ hộp nội dung nào trên đường ... Có kỹ thuật để làm điều này trong CSS hay không, tôi sẽ phải sử dụng lặp lại hình ảnh?Làm thế nào để vẽ một đường thẳng đứng, nằm rải rác xuống giữa trang bằng cách sử dụng CSS?
Đối với các đường chấm chấm tôi sẽ sử dụng:
.vertical_dotted_line
{
border-left: 1px dotted black;
height: 100px;
}
<div class="vertical_dotted_line"></div>
Và để làm cho nó under yếu tố khác mà bạn cần để chơi với z-index của dòng div rải rác của bạn và divs khác (họ cần phải có một giá trị bigged của z-index)
chỉ nên là màu đen thay vì #black –
@CarlAmbroselli yes yes :) –
Điều này có thể được thực hiện bằng cách lặp lại hình ảnh hoặc CSS tùy thuộc vào loại dấu chấm bạn muốn vì CSS chỉ có vài loại hoặc thậm chí là dấu chấm đơn.
Với CSS, bạn có thể thực hiện việc này bằng cách tạo đường viền sang trái hoặc phải.
Ví dụ
<div class="one"></div>
<div class="tow"></div>
CSS
.one{
width: 50%;
border-right: 1px dotted red;
}
và với hình ảnh
body{
background-image: url("dotted.png") repeat-y center top;
}
này cho phép bạn chấm: 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*/
}
Chúng không chỉ đẹp như vậy.
Giải pháp tuyệt vời không có yêu cầu hình ảnh – Scrimothy
Tạo một hình ảnh PNG 1px toàn trong Photoshop với mô hình mong muốn, sau đó đặt nó như nền (hoặc một trong nhiều hình ảnh nền trong CSS3) của phần tử <body>, như vậy:
body {
background-image: url("dottedLine.png") repeat-y center top;
}
Bạn có thể có thể thực hiện việc này mà không cần tệp hình ảnh bằng cách sử dụng URI data: hoặc tạo độ dốc CSS3 2px cao được lặp lại.
Nếu bạn muốn những dòng nên mở rộng ra khỏi chiều cao div của -
.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;
}
Làm thế nào sẽ chấm phải? – banzomaikaka