Làm thế nào để vẽ một đường chấm với css?

97

Làm cách nào để vẽ một đường chấm bằng CSS?

html css

— Kaveh
nguồn

131

Ví dụ:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

Xem thêm Tạo kiểu <hr>với CSS .

— Sinan Ünür
nguồn

3

Vì IE 6 (không thể nhớ được đối với IE7) sẽ không hiểu kiểu "dotted", bạn có thể yêu cầu anh ấy sử dụng "gạch ngang" thay thế, tất nhiên là sử dụng các chú thích có điều kiện để nhắm tới IE6 chứ không phải trình duyệt nào khác.

— FelipeAls

chiều cao: 0px; hoạt động trên Chrome vì các đường viền tách biệt với chiều cao.

— Ben,

Bạn nên hiểu rằng các đường chấm, đứt đoạn có thể trông khác nhau trong nhiều trình duyệt. Điều đó liên quan nhiều hơn đến các đường đứt nét.

— Rantiev

17

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

— rahul
nguồn

15

Sử dụng HTML:

<div class="horizontal_dotted_line"></div>

và trong styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}

— Brendan Long
nguồn

13

Câu trả lời được chấp nhận có rất nhiều điều không cần thiết cho các trình duyệt hiện đại. Cá nhân tôi đã thử nghiệm CSS sau đây trên tất cả các trình duyệt kể từ IE8 và nó hoạt động hoàn hảo.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: nonephải đến trước, để xóa tất cả kiểu đường viền mặc định mà trình duyệt áp dụng cho hrthẻ.

— coredumperror
nguồn

7

Bạn có nghĩa là một cái gì đó như 'border: 1px chấm đen'?

tham khảo w3schools.com

— ChssPly76
nguồn

7

dòng này sẽ phù hợp với bạn:

<hr style="border-top: 2px dotted black"/>

4

.myclass {
    border-bottom: thin red dotted;
}

— Graeme Perrow
nguồn

Nó là một đường đứt nét, không có dấu chấm.

— rahul

Đã sửa. Tôi đã trộn lẫn chấm và gạch ngang. Thêm vào đó, câu trả lời của tôi sẽ cung cấp cho bạn một đường viền toàn bộ chứ không phải là một đường thẳng.

— Graeme Perrow

3

Tôi đã thử tất cả các giải pháp ở đây và không có giải pháp nào cho đường 1px rõ ràng. Để đạt được điều này, hãy làm như sau:

border: none; border-top: 1px dotted #000;

Ngoài ra:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
nguồn

3

sử dụng như thế này:

<hr style="border-bottom:dotted" />

3

Để thực hiện việc này, bạn chỉ cần thêm một border-tophoặc border-bottomvào <hr/>thẻ của mình như sau:

<hr style="border-top: 2px dotted navy" />

với bất kỳ loại đường hoặc màu nào bạn muốn

3

Thêm thuộc tính sau vào phần tử bạn muốn có đường chấm.

style="border-bottom: 1px dotted #ff0000;"

— Sarfraz
nguồn

2

Sử dụng hrtạo ra hai đường cho tôi, một nét liền và một đường chấm.

Tôi thấy rằng điều này hoạt động khá tốt:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Thêm vào đó, vì bạn có thể đặt chiều rộng theo tỷ lệ phần trăm, nên nó sẽ luôn có một số khoảng trống ở hai bên (ngay cả khi bạn thay đổi kích thước cửa sổ).

— lachlanjc
nguồn

1

Hãy thử gạch ngang ...

<hr style="border-top: 2px dashed black;color:transparent;"/>

— Vibhaas Srivastava
nguồn

1

Đã đánh dấu dòng sau phần tử:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}

— Steven Mouret
nguồn