Come disegnare una linea tratteggiata con css?

97

Come posso disegnare una linea tratteggiata con CSS?

html css

— Kaveh
fonte

131

Per esempio:

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

Vedi anche Applicazione <hr>di stili con CSS .

— Sinan Ünür
fonte

3

Dato che IE 6 (non ricordo per IE7) non capirà lo stile "punteggiato", puoi dirgli di usare invece "tratteggiato", usando ovviamente commenti condizionali per puntare su IE6 e nessun altro browser.

— FelipeAls

altezza: 0px; funziona su Chrome perché i bordi sono separati dall'altezza.

— Ben

Dovresti capire che le linee tratteggiate possono avere un aspetto diverso in molti browser. È più correlato alle linee tratteggiate.

— Rantiev

17

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

— rahul
fonte

15

Utilizzando HTML:

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

e in styles.css:

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

— Brendan Long
fonte

13

La risposta accettata ha un sacco di cruft che non è più richiesto per i browser moderni. Ho testato personalmente il seguente CSS su tutti i browser fin da IE8 e funziona perfettamente.

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

border: nonedeve venire prima, per rimuovere tutto lo stile di bordo predefinito che i browser applicano ai hrtag.

— coredumperror
fonte

7

Intendi qualcosa come "bordo: 1px punteggiato di nero"?

Riferimento w3schools.com

— ChssPly76
fonte

7

questa linea dovrebbe funzionare per te:

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

4

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

— Graeme Perrow
fonte

È una linea tratteggiata, non punteggiata.

— rahul

Fisso. Stavo mescolando punteggiato e tratteggiato. Inoltre la mia risposta ti avrebbe dato un intero confine piuttosto che una singola linea.

— Graeme Perrow,

3

Ho provato tutte le soluzioni qui e nessuna ha dato una linea pulita di 1px. Per ottenere ciò, procedi come segue:

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

In alternativa:

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

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
fonte

3

usa in questo modo:

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

3

Per fare ciò, devi semplicemente aggiungere un border-topo border-bottomal tuo <hr/>tag come segue:

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

con qualsiasi tipo di linea o colore desideri

3

Aggiungi il seguente attributo all'elemento che desideri abbia una linea tratteggiata.

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

— Sarfraz
fonte

2

Utilizzando hrcreato due linee per me, una piena e una punteggiata.

Ho scoperto che ha funzionato abbastanza bene:

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

Inoltre, poiché puoi rendere la larghezza una percentuale, avrà sempre dello spazio su entrambi i lati (anche quando ridimensionerai la finestra).

— lachlanjc
fonte

1

Prova tratteggiato ...

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

— Vibhaas Srivastava
fonte

1

Riga dopo elemento:

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
fonte