Il bordo CSS è una proprietà chiave utilizzata per caratterizzare e modellare i bordi attorno ai componenti HTML. I bordi assumono un ruolo vitale nella composizione del sito web, aiutando a creare separazione, enfasi e fascino elegante. Nei CSS, puoi utilizzare alcune proprietà relative ai bordi per controllare lo stile, la varietà, la dimensione e la forma di questi bordi. In questo articolo esamineremo queste proprietà dei bordi CSS e come utilizzarle realmente.
Proprietà del bordo CSS
Le proprietà dei bordi CSS vengono utilizzate per determinare lo stile, la varietà, la larghezza e il flusso e riflusso dei bordi di un componente. Queste proprietà includono:
i primi muker
- stile del bordo
- colore del bordo
- larghezza del bordo
- raggio di confine
1) Stile bordo CSS
La proprietà Stile bordo viene utilizzata per specificare il tipo di bordo che desideri visualizzare sulla pagina web.
Esistono alcuni valori di stile del bordo che vengono utilizzati con la proprietà border-style per definire un bordo.
| Valore | Descrizione |
|---|---|
| nessuno | Non definisce alcun confine. |
| punteggiato | Viene utilizzato per definire un bordo tratteggiato. |
| tratteggiato | Viene utilizzato per definire un bordo tratteggiato. |
| solido | Viene utilizzato per definire un bordo solido. |
| Doppio | Definisce due bordi con lo stesso valore di larghezza del bordo. |
| scanalatura | Definisce un bordo scanalato 3D. l'effetto viene generato in base al valore del colore del bordo. |
| cresta | Definisce un bordo increspato 3D. l'effetto viene generato in base al valore del colore del bordo. |
| inserto | Definisce un bordo interno 3D. l'effetto viene generato in base al valore del colore del bordo. |
| fin dall'inizio | Definisce un bordo iniziale 3D. l'effetto viene generato in base al valore del colore del bordo. |
Esempio:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Produzione:
è uguale al metodo Java
2) Larghezza del bordo CSS
La proprietà border-width viene utilizzata per impostare la larghezza del bordo. È impostato in pixel. Puoi anche utilizzare uno dei tre valori predefiniti, sottile, medio o spesso per impostare la larghezza del bordo.
Nota: la proprietà della larghezza del bordo non viene utilizzata da sola. Viene costantemente utilizzato con altre proprietà di confine come la proprietà 'border-style' per impostare prima il bordo in qualsiasi altro modo in cui non funzionerebbe.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Produzione:
3) Colore del bordo CSS
Esistono tre strategie per impostare il colore del bordo.
- Nome: Determina il nome del colore. Ad esempio: 'rosso'.
- RGB: Determina il valore RGB del colore. Ad esempio: 'rgb(255,0,0)'.
- Hex: determina il valore esadecimale del colore. Ad esempio: '#ff0000'.
Nota: la proprietà border-color non viene utilizzata da sola. Viene costantemente utilizzato con altre proprietà di confine come la proprietà 'border-style' per impostare prima il bordo in qualsiasi altro modo in cui non funzionerebbe.
Esempio:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Produzione:
