Proprietà CSS relative alla decorazione del modello di scatola

Articles

Questo articolo spiega le proprietà CSS relative alla decorazione del modello di scatola.

Puoi imparare a scrivere proprietà come bordi e ombre.

YouTube Video

HTML per Anteprima

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Decorazione

Proprietà `border`

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

La proprietà border viene utilizzata in CSS per impostare il bordo di un elemento. border è composto da tre elementi: larghezza, stile e colore, che sono combinati per impostare il bordo dell'elemento.

Struttura di base di `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Usa border-width per specificare lo spessore del bordo. Le unità vengono specificate in px, em, %, ecc.
Specifica il tipo di bordo con border-style. Puoi specificare i seguenti valori.
- Valori di stile:
  - none (nessun bordo)
  - solid (linea continua)
  - dotted (linea tratteggiata)
  - dashed (linea a tratteggio)
  - double (linea doppia)
  - groove (linea incavata)
  - ridge (linea in rilievo)
  - inset (linea ombra interna)
  - outset (linea ombra esterna)

Specifica il colore del bordo con border-color. Il colore può essere specificato utilizzando nomi di colore, rgb(), rgba(), hex, ecc.

Impostazioni individuali per ciascun lato

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Puoi anche impostare stili diversi per ciascun lato in questo modo.

Impostazioni individuali per larghezza, stile e colore

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Puoi anche specificare ogni aspetto separatamente usando border-width, border-style e border-color.

Combinazione con `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Utilizzando la proprietà border-radius, puoi arrotondare gli angoli del bordo.

Proprietà `border-radius`

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

La proprietà border-radius viene utilizzata per arrotondare gli angoli di un elemento. Puoi curvare dolcemente i quattro angoli di un elemento HTML, trasformando rettangoli o quadrati in un design arrotondato.

Spiegazione:

La classe border-radius-all-rounded arrotonda tutti gli angoli con 20 pixel, creando una scatola rotondeggiante.
La classe border-radius-top-left-rounded arrotonda solo l'angolo in alto a sinistra con 20 pixel, mantenendo gli altri angoli squadrati.
La classe border-radius-ellipse-corners crea angoli ellittici, generando una scatola con una forma arrotondata allungata orizzontalmente.

Il formato della proprietà `border-radius`

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

Il valore della proprietà border-radius è solitamente specificato in pixel o percentuali. Inoltre, puoi impostare da 1 a 4 valori.
- Specificando un solo valore, tutti gli angoli diventano uniformemente arrotondati.
- Specificando due valori, il primo viene applicato agli angoli in alto a sinistra e in basso a destra, mentre il secondo agli angoli in alto a destra e in basso a sinistra.
- Specificando quattro valori, puoi impostare raggi diversi per ciascun angolo. I valori vengono applicati in senso orario a partire dall'angolo in alto a sinistra.
Puoi anche specificare individualmente come border-top-left-radius.

1border-radius: 50px / 25px;

La proprietà border-radius può anche specificare separatamente i raggi verticale e orizzontale per rendere ellittici gli angoli. In questo caso, separa con /.
- Ad esempio, specificando 50px / 25px, il raggio orizzontale sarà di 50 pixel e quello verticale di 25 pixel.

Riepilogo

border-radius è una proprietà per arrotondare gli angoli di un elemento.
Puoi specificare la rotondità degli angoli in pixel o percentuali, applicarla a tutti gli angoli, a quelli specifici o renderli ellittici.
È utile per design flessibili e per personalizzare le interfacce utente.

Proprietà `outline`

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

La proprietà outline è una proprietà CSS utilizzata per disegnare una linea attorno a un elemento.

outline è simile a border, ma differisce nei seguenti aspetti:.

outline non influisce sul modello di box dell'elemento, quindi non modifica il layout dell'elemento.
Poiché outline viene disegnato all'esterno dell'elemento, appare al di fuori di border.
border viene disegnato all'interno dell'elemento, quindi può influire sulle dimensioni e sul layout dell'elemento.

In questo esempio, la proprietà outline è impostata come segue:.

La classe outline-solid imposta un contorno solido rosso di 2px di spessore.
La classe outline-dashed imposta un contorno tratteggiato blu di 3px di spessore.
La classe outline-double imposta un contorno doppio con linee verdi di 4px di spessore.
La classe outline-offset imposta uno spazio di 10px tra il contorno e l'elemento.

Sintassi di Base

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width specifica lo spessore del contorno.
Puoi specificare valori come thin, medium, thick o utilizzare unità come px, em.

`outline-style`

outline-style specifica lo stile del contorno.
Puoi specificare stili come solid, dotted, dashed, double, groove, ridge, inset, outset, none, ecc.

`outline-color`

outline-color specifica il colore del contorno.
Puoi specificare qualsiasi colore utilizzando nomi, HEX, RGB, ecc.

`outline-offset`

outline-offset specifica la distanza tra il contorno e l'elemento.
Puoi specificare valori esatti utilizzando unità come px, em, ecc.

Proprietà `box-shadow`

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

La proprietà box-shadow viene utilizzata per aggiungere ombre agli elementi. Utilizzando questa proprietà, è possibile creare ombre attorno agli elementi per esprimere un senso di dimensionalità e profondità.

Spiegazione:

Nella classe box-shadow-basic-shadow, un'ombra nera sfocata viene visualizzata in basso a destra dell'elemento.
Nella classe box-shadow-inset-shadow, un'ombra sfocata viene visualizzata all'interno dell'elemento. Con l'ombra che entra verso l'interno, è possibile ottenere un design incassato.
Nella classe box-shadow-multiple-shadow, all'elemento vengono applicate due ombre, una nera e una rossa. Poiché vengono visualizzate in posizioni diverse, si ottiene un effetto tridimensionale.

Formato della proprietà `box-shadow`

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Significato di ciascun valore

Il primo horizontal offset è il valore dello spostamento orizzontale, che specifica la posizione dell'ombra rispetto al lato sinistro dell'elemento. Specificando un valore positivo, l'ombra viene posizionata a destra, mentre un valore negativo la posiziona a sinistra.

Il secondo vertical offset è il valore dello spostamento verticale, che specifica la posizione dell'ombra rispetto al lato superiore dell'elemento. Specificando un valore positivo, l'ombra viene posizionata in basso, mentre un valore negativo la posiziona in alto.

Il terzo blur radius è il valore che indica la quantità di sfocatura, specificando quanto l'ombra appare sfumata. Più grande è il valore, più l'ombra si diffonde, risultando in un'ombra più sfumata. Specificando un valore positivo, l'ombra viene posizionata in basso, mentre un valore negativo la posiziona in alto. Questo valore è opzionale e il valore predefinito è 0, il che significa nessuna sfocatura sull'ombra.

Il quarto spread radius è il valore dell'estensione dell'ombra, che specifica quanto si allarga l'ombra. Specificando un valore positivo, l'ombra diventerà più grande, mentre un valore negativo la ridurrà. Anche questo valore è opzionale.

Il quinto valore, color, è il colore, che specifica il colore dell'ombra. I colori possono essere impostati utilizzando nomi di colori, RGB, HEX, HSL e altri modelli di colore disponibili in CSS. Se omesso, viene applicato il colore del testo predefinito dell'elemento (il valore della proprietà color).

È anche possibile specificare prima la parola chiave inset. Specificando la parola chiave inset, l'ombra viene disegnata all'interno dell'elemento anziché all'esterno. È possibile impostare più ombre separate da virgole.

Esempio di `box-shadow`

Esempio di ombra base

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

L'offset orizzontale è 10px, creando un'ombra 10 pixel a destra.
L'offset verticale è 10px, creando un'ombra 10 pixel verso il basso.
Il raggio sfocatura è 5px, risultando in un'ombra sfocata di 5 pixel.
Il colore è rgba(0, 0, 0, 0.5), risultando in un nero semi-trasparente.

Esempio di ombra interna

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Usando inset si disegna l'ombra all'interno dell'elemento.

Esempio di ombre multiple

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Puoi anche impostare ombre multiple separate da virgole. In questo esempio, vengono applicate due ombre: una nera e una rossa.

Riepilogo

box-shadow è una proprietà usata per aggiungere ombre agli elementi e creare un senso di profondità.
Combinando offset orizzontale e verticale, sfocatura, raggio di diffusione e colore, si possono ottenere vari effetti.
Puoi disegnare ombre interne con inset e anche impostare ombre multiple allo stesso tempo.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative allo sfondo Proprietà CSS relative alle liste

Proprietà CSS relative alla decorazione del modello di scatola

YouTube Video

HTML per Anteprima

Decorazione

Proprietà border

Struttura di base di border

Impostazioni individuali per ciascun lato

Impostazioni individuali per larghezza, stile e colore

Combinazione con border-radius

Proprietà border-radius

Spiegazione:

Il formato della proprietà border-radius

Riepilogo

Proprietà outline

Sintassi di Base

outline-width

outline-style

outline-color

outline-offset

Proprietà box-shadow

Spiegazione:

Formato della proprietà box-shadow

Significato di ciascun valore

Esempio di box-shadow

Esempio di ombra base

Esempio di ombra interna

Esempio di ombre multiple

Riepilogo

YouTube Video

Proprietà `border`

Struttura di base di `border`

Combinazione con `border-radius`

Proprietà `border-radius`

Il formato della proprietà `border-radius`

Proprietà `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Proprietà `box-shadow`

Formato della proprietà `box-shadow`

Esempio di `box-shadow`