diff options
Diffstat (limited to 'files/it/web/css/border-style')
| -rw-r--r-- | files/it/web/css/border-style/index.html | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html new file mode 100644 index 0000000000..6776c16da4 --- /dev/null +++ b/files/it/web/css/border-style/index.html @@ -0,0 +1,229 @@ +--- +title: border-style +slug: Web/CSS/border-style +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<div>La proprietà <strong><code>border-style</code></strong> è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.</div> + +<div></div> + +<pre class="brush: css no-line-numbers">/* Applicato a tutti 4 i lati */ +border-style: dashed; + +/* verticale | orrizzontale */ +border-style: dotted solid; + +/* superiore | orizzontale | inferiore */ +border-style: hidden double dashed; + +/* superiore | destra | inferiore | sinistra */ +border-style: none solid dotted dashed; + +/* Valori globali */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<div class="note"><strong>Nota:</strong> Il valore di default di <code>border-style</code> è <code>none</code>. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il <span style="white-space: nowrap;">{{ Cssxref("border-color") }},</span> non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia <code>none</code> o <code>hidden</code>.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<p>La proprietà <code>border-style</code> può essere specificata usando uno, due, tre o quattro valori.</p> + +<ul> + <li><strong>Un solo</strong> valore viene applicato a tutti e quattro i bordi.</li> + <li>Specificando<strong> due </strong>valori, il primo verrà applicato <strong>top e bottom</strong>, il secondo come <strong>left e right</strong>.</li> + <li>Con <strong>tre</strong> valori, il primo verrà applicato come <strong>top</strong>, il secondo a <strong>left e right</strong> e il terzo al <strong>bottom</strong>.</li> + <li>Specificando <strong>quattro</strong> valori si applicheranno <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> e <strong>left</strong> in questo ordine (orario).</li> +</ul> + +<p>Ogni valore è una keyword scelta dalla seguente lista.</p> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore <code>none</code> ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una singola dritta e solida linea.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto intagliato. È l'opposto di <code>ridge</code>. </td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che fa apparire il box incassato.<br> + E' l'opposto di <code>outset.</code> Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di <code>inset</code>. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>ridge</code>.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintassi_Formale">Sintassi Formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabella con tutti i valori della proprietà</h3> + +<p>Ecco un esempio con tutti i valori che la proprietà può assumere</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Definizione stile tabella */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style classi di esempio */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Added <code>hidden</code></td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Le proprietà shorthand CSS relative al bordo: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li> +</ul> |