La proprietà universale border ti consente di impostare contemporaneamente la larghezza, lo stile e il colore del bordo attorno a un elemento. I valori possono andare in qualsiasi ordine, separati da uno spazio, il browser determinerà quale corrisponde alla proprietà desiderata. Per impostare un bordo solo su determinati lati di un elemento, utilizzare le proprietà border-top , border-bottom , border-left , border-right .
Il valore della larghezza del bordo determina la larghezza del bordo. Vengono forniti diversi valori di stile del bordo per controllarne l'aspetto. I loro nomi e il risultato dell'azione sono mostrati in Fig. 1.
Fig. 1. Stili di cornice
border-color imposta il colore del bordo, il valore può essere in qualsiasi formato CSS valido.
eredita eredita il valore del genitore.
HTML5 CSS2.1 IE Cr Op Sa Fx
In questo esempio, attorno al livello viene aggiunto un doppio bordo. Il risultato è mostrato in fig. 2.
Riso. 2. Applicazione della proprietà di confine
document.getElementById("elementID ").style.border
Internet Explorer fino alla versione 6 inclusa esegue il rendering punteggiato come tratteggiato con una larghezza del bordo di 1 px. A 2px e oltre, il valore tratteggiato funziona correttamente. Questo bug è stato corretto in IE7, ma solo per tutti i bordi da 1px. Se uno dei bordi della casella è 2px o più spesso, il punto diventa tratteggiato in IE7.
Internet Explorer fino alla versione 7.0 non supporta il valore ereditario.
Lo stile del bordo può variare leggermente da un browser all'altro quando si utilizzano i valori groove, ridge, inset o outset.
La proprietà generica border viene utilizzata per controllare il bordo di un elemento. Questa proprietà ti consente di impostare la larghezza, lo stile e il colore del bordo di un elemento in un'unica dichiarazione.
Queste tre proprietà (larghezza, stile e colore del bordo) possono essere impostate in un'unica dichiarazione. Ecco un esempio:
Puoi specificare uno stile del bordo solo su un lato di un elemento. Per fare ciò, utilizzare le proprietà border-top (bordo superiore), border-right (bordo destro), border-bottom (bordo inferiore), border-left (bordo sinistro).
In questo esempio, ciascun lato della scatola ha il proprio spessore, stile e colore del bordo.
Considera l'utilizzo dei CSS per creare una forma come questa:
I valori del bordo - spessore, stile e colore - possono essere impostati separatamente utilizzando proprietà speciali.
Consideriamo ciascuno dei valori separatamente.
La proprietà border-style imposta lo stile del bordo. Nei CSS, a differenza dell'HTML, il bordo di un elemento può essere più che semplice. I valori validi per lo stile del bordo sono:
Esempi di come appaiono.
nessun confine (nessuno)
bordo solido (solido)
doppio bordo (doppio)
bordo tratteggiato (punteggiato)
bordo tratteggiato (tratteggiato)
bordo della scanalatura (scanalatura)
confine di cresta
bordo rientrato (riquadro)
bordo estruso (inizio)
A proposito, se imposti il colore del bordo su nero per la cornice del colmo, otterrai il seguente risultato.
Un blocco div con bordo nero e stile cresta.
Il bordo sembra solido, ma ciò è dovuto al fatto che lo stile di cresta viene creato aggiungendo un effetto ombra nera e l'effetto nero sul bordo nero non è visibile.
Con l'aiuto della proprietà border-style, lo stile del bordo può essere impostato non solo per tutti i lati del blocco. È possibile impostare più valori per la stessa proprietà di stile del bordo, a seconda del numero di valori, lo stile del bordo verrà assegnato a un numero diverso di lati del blocco. È possibile impostare uno, due, tre o quattro valori. Diamo un'occhiata agli esempi per ciascun caso.
Un valore (continuo): lo stile del bordo è impostato per tutti i lati del blocco.
Due valori (doppio solido): il primo valore imposta lo stile per i lati superiore e inferiore, il secondo per il lato.
Tre valori (doppio punto continuo): il primo valore per il lato superiore, il secondo per i lati, il terzo per il fondo.
Quattro valori (doppio tratteggio continuo) - ciascun valore per un lato in senso orario a partire dall'alto.
La proprietà border-width viene utilizzata per impostare la larghezza del bordo di un elemento. Lo spessore del bordo può essere specificato in qualsiasi unità di misura assoluta, come i pixel.
Come la proprietà dello stile del bordo, anche la proprietà può essere impostata su uno o quattro valori. Considera esempi per ciascun caso.
Codice di esempio:
Esistono anche valori di parole chiave per la proprietà border-width. Sono tre in totale:
Spessore del bordo: sottile.
Spessore del bordo: medio.
Spessore del bordo: spesso.
La funzione border-color viene utilizzata per controllare il colore del bordo. I colori per questa proprietà possono essere impostati utilizzando uno qualsiasi dei metodi descritti nell'articolo Colori nei CSS, vale a dire:
La proprietà border-color può avere anche da uno a quattro valori e li tratta in modo simile alle proprietà precedenti.
Un valore (rosso).
Due valori (rosso nero).
Tre valori (rosso nero giallo).
Quattro valori (rosso nero giallo blu).
Ora torniamo al compito sopra espresso e disegniamo una figura:
Ecco il codice che disegna una forma del genere, solo più grande:
Come accennato in precedenza, puoi specificare solo i valori delle proprietà del bordo per un lato di una scatola. Per questi scopi, ci sono proprietà:
Lascia che ti ricordi che per tutte le proprietà vengono specificati tre valori (spessore, stile e colore) in qualsiasi ordine. Ma ci sono proprietà che ti consentono di impostare separatamente lo spessore, il colore e lo stile per ciascun lato. La scrittura di queste proprietà deriva da quanto sopra.
Opzioni del bordo superiore (border-top ).
Opzioni del bordo destro (border-right ).
Opzioni del bordo inferiore (border-bottom ).
Opzioni del bordo sinistro (border-left ).
Un esempio di utilizzo di queste proprietà:
La proprietà border-radius serve per arrotondare gli angoli dei bordi di un elemento. Questa proprietà è stata introdotta nei CSS3 e funziona correttamente in tutti i browser moderni ad eccezione di Internet Explorer 8 (e versioni precedenti).
I valori possono essere qualsiasi numero utilizzato nei CSS.
raggio del confine della proprietà: 15px.
Se la cornice del blocco non è impostata, l'arrotondamento avviene con lo sfondo. Ecco un esempio di arrotondamento del blocco senza bordo ma con colore di sfondo:
raggio del confine della proprietà: 15px.
Esistono proprietà per arrotondare ogni singolo angolo di un elemento. Questo esempio li utilizza tutti:
bordo-alto-sinistra-raggio: 15px; raggio-bordo-in-alto-destra: 0; bordo-in basso-a-destra-raggio: 15px; raggio-bordo-basso-sinistra: 0;
raggio del confine della proprietà: 15px.
Sebbene questo codice possa essere scritto in un'unica dichiarazione: border-radius : 15px 0 15px 0 . Il fatto è che per la proprietà border-radius è possibile impostare da uno a quattro valori. La tabella seguente riassume le norme che regolano tali dichiarazioni.
Studiando attentamente questa tabella, puoi capire che la voce più breve per lo stile desiderato sarà: border-radius : 15px 0 . Ci sono solo due valori.
Disegna un limone usando i CSS.
Ecco il codice per tale blocco:
Margine: 0 automatico; /* Centrare il blocco */ larghezza: 200px; altezza: 200px; sfondo: #F5F240; bordo: 1px solido #F0D900; raggio del bordo: 10px 150px 30px 150px;
Abbiamo già disegnato la figura:
Ora lasciamo un triangolo da esso:
Il codice del triangolo è:
Margine: 0 automatico; /* Centrare il blocco */ riempimento: 0px; larghezza: 0px altezza: 0; bordo: 30px bianco pieno; colore del bordo inferiore: rosso;
Ciao, cari lettori del sito blog! Oggi continueremo il nostro studio dei Cascading Style Sheets o CSS. Negli articoli precedenti abbiamo già considerato in termini generali il layout a blocchi del sito. Di conseguenza, abbiamo iniziato a ottenere pagine web abbastanza professionali, ma manca qualcosa. E molto probabilmente mancano di rientri e cornici. Oggi daremo uno sguardo alle regole di stile del margine, del riempimento e del bordo che ti consentono di impostare il riempimento e i bordi per gli elementi html.
Con i fogli di stile a cascata, esistono due tipi di rientro.
1.Rientroè la distanza dal bordo immaginario dell'elemento al suo contenuto. Il valore della distanza viene impostato utilizzando il parametro imbottitura. Tale rientro appartiene all'elemento stesso e si trova al suo interno.
2. Imbottitura esterna- la distanza tra il bordo dell'elemento corrente della pagina web e i bordi degli elementi vicini, o dell'elemento genitore. La dimensione della distanza è controllata dalla proprietà margine. Questa imbottitura è esterna all'elemento.
Immagine per chiarezza:
Ad esempio, considera una cella piena di testo. Quindi il riempimento è la distanza tra il bordo immaginario della cella e il testo in essa contenuto. E il rientro esterno è la distanza tra i bordi delle celle vicine. Cominciamo con i rientri.
Le proprietà di stile imbottitura-left , imbottitura-top , imbottitura-right e imbottitura-bottom ti consentono di impostare i valori di imbottitura rispettivamente per la sinistra, la parte superiore, la destra e la parte inferiore di un elemento della pagina web:
parte superiore imbottita | imbottitura a destra | fondo-imbottitura | imbottitura-sinistra: valore | interesse | ereditare
La quantità di riempimento può essere specificata in pixel (px), percentuali (%) o altre unità CSS accettabili. Quando si specificano le percentuali, il valore viene calcolato dalla larghezza dell'elemento. Il valore ereditato indica che è ereditato dal genitore.
Ad esempio, per il paragrafo corrente, ho applicato una regola di stile che specifica un rientro sinistro di 20px, un rientro superiore di 5px, un rientro destro di 35px e un rientro inferiore di 10px. La voce della regola sarà simile alla seguente:
p.prova(
imbottitura-sinistra:20px;
imbottitura superiore: 5px;
imbottitura destra: 35px;
fondo imbottito: 10px
}
Regola di riempimento prefabbricata ti consente di specificare i rientri su tutti i lati di un elemento di una pagina web contemporaneamente:
imbottitura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
È consentito utilizzare uno, due, tre o quattro valori in una regola prefabbricata, separandoli con uno spazio. In questo caso, l'effetto dipende dal numero di valori:
Pertanto, la regola CSS di cui sopra può essere abbreviata il più possibile e scritta come segue:
p.test(imbottitura:5px 35px 10px 20px)
Gli attributi di stile margin-left , margin-top , margin-right e margin-bottom ti consentono di impostare rispettivamente la quantità di margine sinistro, superiore, destro e inferiore:
margine superiore | margine destro | margine-inferiore | margine sinistro:<значение>|auto|eredita
Come accennato in precedenza, il margine è la distanza dal bordo dell'elemento corrente al bordo dell'elemento vicino o, se non ci sono elementi vicini, al bordo interno del contenitore genitore.
La quantità di riempimento può essere specificata in pixel (px), percentuali (%) o altre unità CSS accettabili:
P(
margine sinistro: 20px;
}
h1(
margine destro: 15%;
}
Il valore automatico significa che il riempimento verrà calcolato automaticamente dal browser. Nel caso in cui si utilizzi una notazione percentuale, i rientri vengono calcolati in base a larghezza del contenitore principale. E questo vale non solo per margin-left e margin-right, ma anche per margin-top e margin-bottom, la percentuale di riempimento verrà calcolata in base alla larghezza, non all'altezza del contenitore.
È consentito l'uso di rientri esterni come valori valori negativi:
P(
margine sinistro: -20px;
}
Se con valori positivi di rientro gli elementi vicini si allontanano, con un valore negativo il blocco vicino passerà sopra l'elemento per il quale abbiamo impostato un rientro così negativo.
Possiamo anche specificare i margini utilizzando l'attributo style. margine. Imposta i valori di rientro contemporaneamente su tutti i lati dell'elemento della pagina web:
margine:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Questa proprietà, nel caso di impostazione di uno, due, tre o quattro valori di riempimento, obbedisce alle stesse leggi della regola di riempimento.
Esistono tre tipi di opzioni quando si impostano i frame:
Cominciamo con il parametro dello spessore del bordo:
larghezza del bordo: [valore | sottile | medio | spesso] (1,4) | ereditare
spessore del telaio può essere impostato in pixel o in altre unità disponibili nei css. Le variabili sottile, media e spessa impostano lo spessore del bordo rispettivamente su 2, 4 e 6 pixel:
larghezza del bordo: media;
Come per le proprietà di riempimento e margine, sono consentiti uno, due, tre o quattro valori per il parametro larghezza del bordo, impostando così la larghezza del bordo per tutti i lati contemporaneamente o per ciascuno separatamente:
larghezza del bordo: 5px 3px 5px 3px
Per il paragrafo corrente, renderemo lo spessore del bordo superiore 1px, 2px destro, 3px inferiore e 4px sinistro utilizzando la regola (larghezza bordo: 1px 2px 3px 4px;)
Gli attributi di stile border-left-width , border-top-width , border-right-width e border-bottom-width possono essere utilizzati per impostare rispettivamente lo spessore dei lati sinistro, superiore, destro e inferiore del bordo :
larghezza-bordo-sinistra|larghezza-bordo-alto|larghezza-bordo-destra|larghezza-bordo-fondo: sottile|medio|spesso|<толщина>|ereditare
Il parametro successivo è il colore del bordo con cui puoi controllare colore del telaio:
colore del bordo: [colore | trasparente](1,4) | ereditare
La proprietà consente di impostare il colore della cornice per tutti i lati dell'elemento contemporaneamente o solo per quelli specificati. Come valore è possibile utilizzare i metodi di impostazione accettati in html per i colori: codice esadecimale, parole chiave, ecc.:
p(larghezza bordo: 2px; colore bordo: rosso)
Il valore trasparente imposta il colore del bordo trasparente ed eredita eredita il valore del genitore. Per impostazione predefinita, se il colore del bordo non è impostato, verrà utilizzato quello utilizzato per il carattere all'interno dell'elemento specificato.
Gli attributi di stile border-left-color , border-top-color , border-right-color e border-bottom-color impostano rispettivamente il colore dei lati sinistro, superiore, destro e inferiore del bordo:
colore-bordo-sinistra|colore-bordo-superiore|colore-bordo-destra|colore-bordo-bottom: trasparente|<цвет>|ereditare
E gli ultimi set di parametri in stile bordo tipo di telaio:
stile bordo: (1,4) | ereditare
Il tipo di cornice può essere specificato per tutti i lati dell'elemento contemporaneamente o solo per quelli specificati. È possibile utilizzare più parole chiave come valori. La visualizzazione dipenderà dal browser che stai utilizzando e dallo spessore della cornice. Senso nessuno viene utilizzato per impostazione predefinita e non visualizza una cornice e il suo spessore è impostato su zero. Il valore nascosto ha lo stesso effetto. La cornice risultante per i restanti valori, a seconda dello spessore, è mostrata nella tabella seguente:
Gli attributi di stile border-left-style , border-top-style , border-right-style e border-bottom-style impostano lo stile delle linee che verranno utilizzate per disegnare i lati sinistro, superiore, destro e inferiore della cornice , rispettivamente:
stile border-left|stile border-top|stile border-right|stile border-bottom: nessuno|nascosto|punteggiato|tratteggiato|solido|doppio|scanalatura|ridge|inset|outset|eredita
Come per le opzioni margine e riempimento, il bordo ha confine di proprietà generico. Ti consente di impostare contemporaneamente lo spessore, lo stile e il colore del bordo attorno a un elemento:
confine: | ereditare
I valori possono essere in qualsiasi ordine, separati da spazi:
td (bordo: 1px giallo fisso)
Per impostare un bordo solo su determinati lati di un elemento, sono disponibili le proprietà border-top, border-bottom, border-left, border-right, che consentono di impostare i parametri per i lati superiore, inferiore, sinistro e destro dell'elemento. confini, rispettivamente.
Non resta che riassumere:
Noto che tutte queste proprietà CSS aumentano la dimensione dell'elemento della pagina web. Pertanto, se modifichiamo lo spessore del bordo o la dimensione del riempimento dei contenitori di blocchi che formano il design della pagina web, dovremo ridimensionare questi contenitori di conseguenza, altrimenti potrebbero spostarsi e il design verrà interrotto.
Questo è tutto, a presto!
Vlad Merzhevich
Con i CSS puoi aggiungere un bordo a un elemento in diversi modi. Fondamentalmente, ovviamente, viene utilizzata la proprietà border, in quanto la più versatile, così come il contorno e, sorprendentemente, box-shadow , il cui compito principale è creare un'ombra. Diamo un'occhiata a questi metodi e alle loro differenze.
La proprietà più semplice per creare frame. Ha gli stessi parametri di border , ma differisce notevolmente da esso in alcuni dettagli:
Sorge la domanda: in quali casi è necessaria una definizione, quando il suo ruolo, nonostante le differenze elencate, è completamente assunto dal confine? Non ci sono così tante situazioni, ma si verificano:
Deve essere chiaro che il contorno non sostituisce in alcun modo il confine e può benissimo coesistere con esso, come mostrato nell'esempio 1.
Esempio 1: creare una cornice
In questo esempio viene aggiunto un bordo nero attorno all'elemento, separato dallo sfondo da un bordo bianco (Fig. 1).
Riso. 1. Bordo attorno all'elemento
L'aggiunta di un bordo oltre il bordo aumenta la larghezza dell'elemento, il che è abbastanza evidente quando si combinano border e la pseudo-classe :hover. Ci sono due modi per "vincere". Il più semplice è sostituire il bordo con un contorno , che sappiamo non ha alcun effetto sulla dimensione dell'elemento (esempio 2).
Esempio 2: frame al passaggio del mouse
il contorno non è sempre adatto, se non altro perché non è affetto da angoli arrotondati. Il secondo metodo è adatto in questo caso: aggiungi un bordo invisibile o un bordo che corrisponda al colore dello sfondo, quindi modifica i suoi parametri al passaggio del mouse (esempio 3). In questo caso non si verificherà alcuno spostamento dell'elemento, poiché inizialmente il telaio è già presente. Ma ricorda sempre che la larghezza dell'elemento è la somma dei valori di larghezza, bordo a sinistra e bordo a destra. Lo stesso vale per l'altezza.
Esempio 3: frame al passaggio del mouse
In alcuni browser (Chrome, Safari, versioni recenti di Opera), attorno ai campi del modulo viene visualizzato un piccolo bordo colorato quando vengono attivati (Fig. 2). Per rimuoverlo è sufficiente aggiungere il valore none alla proprietà contour negli stili, come mostrato nell'esempio 4.
Riso. 2. Inquadra i campi
Esempio 4. Rimuovere la cornice
Sebbene la proprietà box-shadow sia intesa ad aggiungere un'ombra attorno a un elemento, può anche essere utilizzata per creare bordi e bordi che non possono essere realizzati con border o contour . Ciò è dovuto al fatto che il numero di ombre può essere illimitato, i cui parametri sono elencati separati da virgole.
Per ottenere una cornice, i primi tre parametri dovrebbero essere impostati su zero, sono responsabili della posizione dell'ombra e della sua sfocatura. Il quarto parametro in questo caso è responsabile dello spessore del bordo e il quinto imposta il colore della cornice. Per il secondo telaio il quarto parametro è pari alla somma degli spessori dei due telai.
L'esempio 4 mostra come aggiungere due riquadri e un bordo a destra utilizzando una singola proprietà box-shadow.
Esempio 4: utilizzo del box-shadow
Il risultato di questo esempio è mostrato in Fig. 3.
Riso. 3. Cornici create dalla proprietà box-shadow
La proprietà CSS border si adatta per creare il bordo di un oggetto, vale a dire per lo spessore del bordo, per il suo colore e stile. Questa proprietà è ampiamente utilizzata in HTML. Puoi creare vari effetti per una migliore percezione del contenuto della pagina. Ad esempio, progetta una barra laterale, un'intestazione del sito, un menu, ecc.
confine : border-width border-style border-color | ereditare;
I valori nella proprietà CSS border possono essere impostati in qualsiasi ordine. La sequenza più comunemente utilizzata è "colore stile spessore".
stile bordo: tratteggiatostile bordo: tratteggiatostile bordo: solidostile bordo: doppiostile bordo: scanalaturastile del bordo: crestastile bordo: insertostile border: fin dall'inizioQuattro fotogrammi diversi
stile bordo: punteggiato
stile bordo: tratteggiato
stile bordo: solido
stile bordo: doppio
stile bordo: scanalatura
stile del bordo: cresta
stile bordo: inserto
stile border: fin dall'inizio
Quattro fotogrammi diversi
Questo esempio è molto semplice ma interessante. Mostra come utilizzare la pseudo-classe :hover e il bordo CSS per creare effetti semplici (come i menu).
Quando passi il mouse sul blocco, il colore della cornice cambierà.
Ecco come appare nella pagina:
La cornice può essere resa trasparente. Questo effetto è raro ma a volte può essere molto utile per i web designer. Per impostare la trasparenza, è necessario utilizzare l'impostazione del colore nella forma RGBA (R, G, B, P), dove l'ultimo parametro è la trasparenza (numero reale da 0,0 a 1,0)
Ecco come appare nella pagina:
Imposta lo spessore della linea. In precedenza, lo abbiamo impostato in un'unica descrizione del bordo.
Sintassi CSS
larghezza del bordo : sottile | medio | spesso | Senso;
Di seguito sono riportati alcuni esempi. La cosa più insolita sarà il diverso spessore del bordo su ciascun lato.
larghezza del bordo: sottilelarghezza del bordo: medialarghezza del bordo: spessoSpessori differenziati ai bordi
Ecco come appare nella pagina:
larghezza del bordo: sottile
larghezza del bordo: media
larghezza del bordo: spesso
Spessori differenziati ai bordi
La proprietà border CSS ha proprietà derivate per impostare bordi unilaterali su un elemento:
Questi confini possono essere combinati, ad es. scrivere una cornice per ciascuna direzione. La sintassi è esattamente la stessa di border.
Ci sono anche immobili
Secondo me è più semplice scrivere tutto in una riga piuttosto che produrre testo extra negli stili. Ad esempio, le seguenti proprietà saranno le stesse
/* Descrizione di due stili identici: */
Esempio di cornice di citazione
Ecco come appare nella pagina:
Esempio di cornice di citazione
Nota
È possibile impostare un bordo separato per ciascun lato.
A volte è necessario creare più bordi. Facciamo un esempio
Ecco come appare nella pagina:
C'è un secondo modo attraverso la sovrapposizione delle ombre.
Ecco come appare nella pagina:
Per creare bellissimi bordi, utilizza la proprietà CSS border-radius (disponibile solo in CSS3). Con esso, puoi realizzare angoli arrotondati, creando un aspetto completamente diverso. Per esempio
Le linee in rilievo possono apparire spettacolari su uno sfondo scuro, che non è adatto a tutti i siti.
Ecco come appare nella pagina:
Per accedere al bordo da JavaScript, è necessario scrivere la seguente costruzione:
document.getElementById("elementID").style.border="VALORE "(!LANGA:
