Proprietà CSS column-rule-width
La proprietà CSS column-rule-width imposta lo spessore della riga divisoria tra le colonne di un layout multi-colonna, con esempi.
La proprietà CSS column-rule-width imposta lo spessore della riga (la linea divisoria) tracciata tra le colonne di un layout multi-colonna. Funziona esattamente come la larghezza di un bordo — ma invece di circondare un riquadro, la riga si trova nello spazio tra le colonne. È una delle proprietà CSS3.
Da sola, column-rule-width non produce alcun effetto visibile. La riga appare solo quando column-rule-style è impostata su un valore diverso da none (il valore iniziale), perché una linea senza stile non ha nulla da disegnare. È inoltre necessaria più di una colonna — la riga viene disegnata solo negli spazi che separano effettivamente le colonne, e mai nello spazio vuoto lasciato quando il contenuto non riempie tutte le colonne.
Questa proprietà accetta uno dei seguenti valori:
thin— una riga sottile.medium— una riga media. Questo è il valore iniziale.thick— una riga spessa.<length>— una larghezza esplicita come2pxo0.2em. I valori percentuali e negativi non sono consentiti.
La specifica lascia deliberatamente ai browser la definizione dello spessore esatto in pixel di thin, medium e thick. Garantisce solo l'ordinamento: thin ≤ medium ≤ thick. Quando si desidera un risultato prevedibile tra i browser, è consigliabile usare un valore <length>.
Nella maggior parte dei fogli di stile si impostano larghezza, stile e colore insieme con la proprietà abbreviata column-rule invece di scrivere tre dichiarazioni separate:
/* These two rules are equivalent */
column-rule: 15px groove #1c87c9;
column-rule-width: 15px;
column-rule-style: groove;
column-rule-color: #1c87c9;| Valore iniziale | medium |
|---|---|
| Si applica a | Elementi multi-colonna. |
| Ereditato | No. |
| Animabile | Sì. La larghezza e il colore della riga sono animabili. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnRuleWidth = "5px"; |
Sintassi
Sintassi della proprietà CSS column-rule-width
column-rule-width: medium | thin | thick | length | initial | inherit;Esempio della proprietà column-rule-width:
Esempio della proprietà CSS column-rule-width con valore thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
column-rule-color: #666;
column-rule-width: thick;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Risultato
Esempio della proprietà column-rule-width con il valore "thin":
Esempio della proprietà CSS column-rule-width con valore thin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: thin;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Esempio della proprietà column-rule-width specificata come "15px":
Esempio della proprietà CSS column-rule-width con valore length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: groove;
column-rule-color: #1c87c9;
column-rule-width: 15px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-width property example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| medium | La riga è media. Questo è il valore predefinito. | |
| thick | La riga è spessa. | |
| thin | La riga è sottile. | |
| length | Specifica la larghezza della riga. | |
| initial | Imposta la proprietà al suo valore predefinito. | |
| inherit | Eredita la proprietà dall'elemento padre. |
Cose da tenere a mente
- La riga non occupa spazio nel layout. Come un box-shadow, la riga viene disegnata all'interno del
column-gap. Una riga più larga dello spazio sovrapporrà il contenuto delle colonne anziché allontanarle, quindi assicurarsi che lo spazio sia abbastanza ampio per la larghezza scelta. - Nessuna riga senza stile. Se
column-rule-styleènone(o non impostata), modificare la larghezza non produce alcun effetto visibile. Questa è la ragione più comune per cui una riga "non appare". - Solo lunghezze — nessuna percentuale. A differenza di molte misure CSS,
column-rule-widthnon accetta valori percentuali e negativi; un valore non valido fa sì che l'intera dichiarazione venga ignorata. - È animabile. La transizione della larghezza produce un ingrossamento o un assottigliamento fluido del divisore.
Proprietà correlate
La riga multi-colonna è controllata da un piccolo gruppo di proprietà che di solito si usano insieme:
column-rule— la forma abbreviata per larghezza, stile e colore.column-rule-style— lo stile della linea; necessario affinché la larghezza sia visibile.column-rule-color— il colore della riga.column-countecolumn-gap— definiscono il numero di colonne e lo spazio in cui si trova la riga.