Cornice CSS un elemento è una o più linee che circondano il contenuto e il riempimento dell'elemento. Il bordo viene impostato utilizzando il bordo della proprietà breve. Lo stile del bordo viene impostato utilizzando tre proprietà: stile, colore e larghezza.
Disegnare i bordi e i bordi degli elementi HTML con le proprietà CSS
1. Stile bordo
Per impostazione predefinita, i bordi vengono sempre disegnati sopra lo sfondo dell'elemento, lo sfondo si estende fino al bordo esterno dell'elemento. Lo stile della cornice ne determina la visualizzazione, senza questa proprietà le cornici non saranno affatto visibili. Per un elemento, puoi impostare un bordo per tutti i lati contemporaneamente utilizzando la proprietà border-style o separatamente per ciascun lato utilizzando le proprietà di tracciatura border-top-style, ecc. Non ereditato.
| stile del bordo (stile bordo superiore, stile bordo destro, stile bordo inferiore, stile bordo sinistro) |
|
|---|---|
| I valori: | |
| nessuno | Il valore predefinito significa nessun bordo. Rimuove anche il bordo di un elemento da un gruppo di elementi con un valore impostato per questa proprietà. |
| nascosto | Equivalente a nessuno. |
| punteggiato |
punteggiato |
| tratteggiato |
tratteggiato |
| solido |
solido |
| Doppio |
Doppio |
| scanalatura |
scanalatura |
| cresta |
cresta |
| inserto |
inserto |
| fin dall'inizio |
fin dall'inizio |
| {1,4} |
Enumerazione simultanea di quattro stili diversi per i bordi dell'elemento, solo per la proprietà border-style:
|
| iniziale | |
| ereditare | |
Sintassi
P (stile del bordo: solido;) p (stile del bordo superiore: solido;)
2. Colore del bordo colore del bordo
La proprietà imposta contemporaneamente il colore dei bordi di tutti i lati. Con l'aiuto di proprietà chiare, puoi impostare un colore personalizzato per il bordo di ciascun lato dell'elemento. Se non viene specificato alcun colore per il bordo, sarà lo stesso del colore del testo dell'elemento. Se l'elemento non ha testo, il colore del bordo sarà lo stesso del colore del testo dell'elemento genitore. Non ereditato.
| colore del bordo (colore del bordo superiore, colore del bordo destro, colore del bordo inferiore, colore del bordo sinistro) |
|
|---|---|
| I valori: | |
| trasparente | Imposta il colore trasparente per il bordo. In questo caso, rimane la larghezza del telaio. Può essere utilizzato per cambiare il colore del bordo quando si passa il mouse su un elemento per evitare di spostare l'elemento. |
| colore | Il colore delle cornici viene impostato utilizzando i valori delle proprietà. (colore del bordo: # cacd58;) |
| {1,4} |
Elenca quattro colori diversi contemporaneamente per i bordi dell'elemento, solo per la proprietà border-color:
|
| iniziale | Imposta il valore della proprietà sul valore predefinito. |
| ereditare | Eredita il valore della proprietà dall'elemento padre. |
Sintassi
P (colore del bordo: # cacd58;)
3. La larghezza della larghezza del bordo
La larghezza della cornice viene specificata utilizzando unità di lunghezza o parole chiave. Se la proprietà border-style è impostata su none e una certa larghezza è impostata per il bordo dell'elemento, in questo caso la larghezza del bordo è impostata su zero. Non ereditato.
Sintassi
P (larghezza bordo: 2px;)
4. Impostazione della cornice con una proprietà
La proprietà border ti permette di combinare le seguenti proprietà: border-width, border-style, border-color, ad esempio:
Div (larghezza: 100 px; altezza: 100 px; bordo: 2 px grigio solido;)
In questo caso, le proprietà specificate verranno applicate a tutti i bordi dell'elemento contemporaneamente. Se uno qualsiasi dei valori non viene specificato, il valore predefinito prenderà il suo posto.
5. Impostare un bordo per un bordo di un elemento
Nel caso in cui sia necessario impostare uno stile diverso del bordo di un elemento, è possibile utilizzare la scorciatoia per il bordo corrispondente.
Le seguenti proprietà combinano le seguenti proprietà in un'unica dichiarazione: border-width, border-style e border-color. L'elenco delle proprietà è specificato nell'ordine specificato, mentre uno o due valori possono essere omessi, nel qual caso i loro valori assumeranno i valori predefiniti.
Lo stile del bordo superiore viene impostato utilizzando la proprietà border-top, quello inferiore è border-bottom, quello sinistro è border-left e quello destro è border-right.
Sintassi
P (bordo in alto: 2px grigio pieno;)
6. Contorno esterno
La proprietà imposta il bordo esterno attorno agli elementi (cioè al di fuori del bordo normale). Lo scopo principale di questa proprietà è evidenziare un elemento. A differenza della proprietà border, l'applicazione di questa proprietà non influisce sulla dimensione o sulla posizione dell'elemento, poiché lo è. il contorno viene disegnato sul riquadro dell'elemento, che a sua volta può causare la sovrapposizione del padding esterno dell'elemento e delle aree adiacenti.
Inoltre, il contorno esterno, a differenza del bordo dell'elemento, circonda l'elemento da tutti i lati, inquadrandolo interamente.
Il contorno esterno è sempre rettangolare, non segue i bordi del riquadro per il quale è impostato il raggio del bordo.
La proprietà outline consente di combinare le seguenti proprietà: outline-color, outline-style, outline-width. Se uno qualsiasi dei valori non viene specificato, il valore predefinito prenderà il suo posto.
Div (larghezza: 100 px; altezza: 100 px; contorno: # cacd58 solido 2 px;)
6.1. Stile contorno stile contorno
L'aspetto della linea di contorno esterna viene impostato allo stesso modo dello stile del bordo dell'elemento. Non ereditato.
Sintassi
P (stile di contorno: cresta;)
6.2. Colore contorno contorno-colore
Il colore del contorno può essere disegnato solo quando è impostato lo stile del contorno. Non ereditato.
Sintassi
P (stile contorno: cresta; colore contorno: argento;)
6.3. Spessore contorno larghezza contorno
Lo spessore della linea di contorno esterna viene impostato allo stesso modo dello spessore del bordo dell'elemento. Non ereditato.
Sintassi
P (stile contorno: punteggiato; larghezza contorno: 5 px;)
Ciao cari amici e ospiti del blog! Oggi continuiamo a familiarizzare con gli elementi di costruzione del sito e impariamo come creare frame CSS. Nel mio ultimo articolo te l'ho detto e mostrato come si creano, ma framework css sembrare più bello e attraente. Pertanto, chiunque abbia imparato a creare frame html padroneggerà la creazione di un frame CSS. E io ti aiuterò con questo! Iniziamo ...
Come creare un framework CSS per un sito Web da soli?
Come ti ho già detto sopra, i frame css sono molto più belli e pratici dei frame html e non sarà difficile per te creare tali frame css da solo se hai già imparato a creare frame html.
Di cosa abbiamo bisogno per creare framework CSS? Niente di trascendentale! Il tuo desiderio e il mio articolo, in cui ti spiegherò tutto in dettaglio.
Ecco il suo codice:
Il nostro framework CSS!
Ecco un secondo esempio di frame CSS:
Ecco il suo codice:
Il nostro framework CSS!
Ecco un terzo esempio di cornice punteggiata:
Questo è il suo codice:
Il nostro framework CSS!
Questo è il quarto esempio di una cornice a doppio bordo:
Questo è il suo codice:
Il nostro framework CSS!
E se applichi il valore "ridge", allora questo è il frame che ottieni:
Ecco il suo codice:
Il nostro framework CSS!
Ora rendiamo i bordi della nostra casella CSS arrotondati con questi valori "border-radius" e "box-shadow":
Ecco un bordo arrotondato e il suo codice:
Il nostro framework CSS!
Ora creiamo una cornice con bordi sfocati, sembra anche piuttosto attraente ed è facile da fare, basta cambiare il valore dell'ombra della scatola su un valore più alto. Ed ecco cosa succede:
Ecco il suo codice:
Il nostro framework CSS!
Ora creiamo una cornice con contorni multicolori, aggiungi solo alcuni colori al valore "box-shadow":
Ecco il suo codice:
Il nostro framework CSS!
E ora l'apice delle nostre cornici CSS è la cornice rotonda. Può anche essere fatto semplicemente modificando il valore "border-radius". Guarda qui:
Ecco il suo codice qui:
Il nostro framework CSS!
Bene, per oggi è tutto. Fino alla prossima volta!
Se ti è piaciuto il materiale, procedi come segue...
- Mi piace.
- Ritwitta.
- Condividi questo post con i tuoi amici sui social network.
Grazie per l'attenzione!
In questo capitolo:
Il modello a blocchi è un modo di visualizzare gli elementi dai browser che trattano tutti i tag come piccoli blocchi, per loro ogni tag è un contenitore con contenuto: testo, immagini, altri tag, ecc.
- Margine(padding) è uno spazio vuoto (margine) che separa un elemento dall'altro. L'esempio più semplice di riempimento è lo spazio tra i paragrafi che si susseguono uno dopo l'altro. L'area di riempimento è trasparente e non può avere il proprio colore o altri effetti di design.
- Confine(frame dell'elemento) - il bordo su entrambi i lati dell'elemento. Il telaio può essere installato sia su tutti i lati dell'elemento, sia su un lato. Utilizzando un bordo, puoi semplicemente modellare un elemento in modo bello o separare visivamente il contenuto dell'elemento corrente dagli altri elementi della pagina.
- Imbottitura(imbottitura) - lo spazio bianco tra il contenuto di un elemento e il suo bordo. L'area dell'imbottitura è trasparente e non può avere un colore proprio o altri effetti decorativi.
- La maggior parte degli elementi ha un'area di contenuto che contiene tutto contenuto elemento (testo, immagini inserite o altri elementi).
Portafoto
La cornice è una linea regolare che appare intorno all'elemento stilizzato. Ma non è affatto necessario utilizzare una cornice che circonda l'elemento su tutti i lati. Puoi aggiungerlo solo dal lato richiesto dell'elemento. Ad esempio, se aggiungi un bordo solo sul lato inferiore di un elemento di blocco, avrà lo stesso effetto di elemento
(linea orizzontale), fungendo da separatore.
Ogni frame ha tre proprietà che possiamo controllare tramite CSS: width, style e color, vediamo quali proprietà possono essere utilizzate per impostarle e modificarle:
Invece di specificare tutte e tre le proprietà, puoi specificarne solo una: proprietà di confine che consente di specificare contemporaneamente larghezza, stile e colore del bordo:
Primo paragrafo.
Secondo paragrafo.
Terzo paragrafo.
Per controllare la cornice separatamente su ciascun lato dell'elemento, utilizzare le proprietà corrispondenti:
- bordo-top- telaio superiore
- bordo-sinistra- telaio sinistro
- confine-destra- telaio destro
- bordo-fondo- telaio inferiore
Queste proprietà funzionano esattamente come la proprietà border, con l'eccezione che ti consentono di controllare solo il bordo su un lato dell'elemento con stile.
Imbottitura e imbottitura
Imbottitura interna- spazio bianco tra il contenuto dell'elemento e il suo bordo (se impostato). Per aggiungere e controllare la larghezza dell'imbottitura su tutti e quattro i lati di un elemento, utilizzare proprietà di imbottitura.
Il riempimento esterno è lo spazio bianco che separa un elemento dagli altri elementi o dai bordi della finestra del browser. Per aggiungere e controllare la larghezza dell'imbottitura su tutti e quattro i lati di un elemento, utilizzare proprietà del margine.
Le proprietà padding e margin possono assumere da uno a quattro valori:
Dove i valori sono impostati in senso orario, partendo dall'alto:
Se specifichi un solo valore per le proprietà, i rientri su tutti i lati avranno la stessa larghezza.
A prima vista, l'effetto visibile quando si utilizzano queste proprietà sembra lo stesso, per notare la differenza visiva tra di loro, ad esempio, puoi impostare un bordo per un elemento o impostare uno sfondo:
Paragrafo regolare.
Per i rientri, così come per i frame, esistono proprietà che consentono di controllare separatamente la dimensione del rientro su ciascun lato. Il riempimento è controllato dalle proprietà: Imbottitura , padding-right , imbottitura-fondo e imbottitura-sinistra... L'imbottitura esterna è controllata dalle proprietà: margine superiore , margine-destro , margine inferiore e margine sinistro.
Nota: i valori delle proprietà padding e margin non vengono ereditati dai figli, quindi è necessario specificare la larghezza del padding separatamente per ogni elemento che ne ha bisogno.
Larghezza e altezza dell'elemento
Per impostazione predefinita, la larghezza automatica viene utilizzata per gli elementi del blocco. Ciò significa che l'elemento si allungherà esattamente quanto lo spazio libero è disponibile. L'altezza predefinita degli elementi del blocco viene impostata automaticamente, ad es. il browser estende l'area del contenuto verticalmente per visualizzare tutto il contenuto. Per impostare dimensioni personalizzate per l'area del contenuto di un elemento, puoi utilizzare le proprietà di larghezza e altezza.
Una delle applicazioni divertenti della proprietà box-shadow CSS3 è creare un doppio bordo attorno a un elemento. Un effetto molto interessante per la decorazione della pagina, ma funzionerà solo nelle versioni più recenti dei browser che supportano box-shadow.
Tuttavia, ci sono molti altri metodi per creare questo effetto. Inoltre, l'uso ovvio di un'immagine di sfondo è tutt'altro che ideale.
Questo tutorial introduce cinque metodi per creare un doppio bordo attorno a un elemento. E solo uno di questi richiede un'immagine e tutti gli altri utilizzano codice CSS puro con un eccellente supporto nei browser.
Metodo 1: bordo e contorno
Questo metodo funziona solo nei browser che supportano la proprietà outline (tutti tranne IE6 / 7). Si aggiungono sia le proprietà di bordo che quelle di contorno all'elemento.
Uno (bordo: solido 6px #fff; contorno: solido 6px # 888;)
Il motivo per cui questo metodo funziona è perché la cornice del contorno disegna sempre all'esterno del rettangolo. Il problema con la proprietà outline si verifica quando vengono utilizzati elementi mobili, poiché il bordo si sovrappone agli elementi adiacenti.
Metodo 2: pseudo elemento
Questo metodo richiede il posizionamento assoluto del telaio:
Due (bordo: solido 6px #fff; posizione: relativo; z-index: 1;) .due: prima (contenuto: ""; display: blocco; posizione: assoluto; alto: -12px; sinistra: -12px; bordo: solido 6px # 888; larghezza: 312px; padding-bottom: 12px; altezza minima: 100%; indice z: 10;)
I punti chiave sono l'impostazione della proprietà z-index (in modo che lo pseudo elemento si sovrapponga al contenuto), il posizionamento e il valore di altezza minima. Quest'ultima proprietà preserva l'elasticità del telaio.
Metodo 3: ombra
Il metodo migliore in quanto richiede solo una riga di codice con le impostazioni della proprietà box-shadow.
Tre (box-shadow: 0 0 0 6px #fff, 0 0 0 12px # 888;)
Vengono utilizzate due ombre per creare un doppio bordo. Sono separati da virgole. La sfocatura è impostata su 0. Poiché la seconda ombra si sovrappone alla prima, ha una larghezza doppia. Il punto chiave è l'uso di colori opachi, che creano un confine netto tra le cornici.
Come la proprietà outline, box-shadow non ha effetto sugli elementi adiacenti e può sovrapporsi ad essi. Pertanto, è necessario impostare un campo per formare l'aspetto della composizione.
Naturalmente, il supporto per la proprietà box-shadow è limitato ai browser più recenti.
Metodo 4: l'elemento div extra
Questo metodo utilizza un elemento esterno
Quattro (bordo: solido 6 px # 888; sfondo: #fff; larghezza: 312 px; altezza minima: 312 px;) .quattro div (larghezza: 300 px; altezza minima: 300 px; sfondo: # 222; margine: 6 px auto; overflow : nascosto;)
L'elemento esterno è leggermente più grande, dando l'illusione di un doppio bordo.
Metodo 5: la proprietà border-image
Un'altra nuova tecnica è la proprietà border-image CSS3, spesso trascurata:
Cinque (border-width: 12px; -webkit-border-image: url (multiple-borders.gif) 12 12 12 12 ripeti; -moz-border-image: url (multiple-borders.gif) 12 12 12 12 ripeti; border-image: url (più bordi) 12 12 12 12 ripeti; / * per Opera * /)
Conosci un altro metodo?
Naturalmente, qui vengono raccolti metodi noti da tempo e ampiamente utilizzati. Ma forse conosci un trucco. Condividi con i tuoi lettori nei commenti.
