Sono sicuro che hai già familiarità con la proprietà css border. Stai imparando qualcosa di nuovo che non sapevi sul confine css prima? Bene, non solo imparerai, ma vedrai anche alcune cose nuove che non hai mai saputo prima!
Non solo CSS3 può essere usato per arrotondare gli angoli, ma puro codice CSS può essere usato per creare forme complesse... In passato, potevi usare l'immagine di sfondo per dare l'impressione di angoli arrotondati. Grazie a nuove tecniche per l'utilizzo di border, possiamo farlo in puro codice css.
Le basi dell'utilizzo di css border
Sicuramente lo conosci già uso standard proprietà del bordo:
Bordo: 1px nero solido;
Il codice sopra renderà un bordo di 1 pixel, che sarà nero. Semplicemente e facilmente. Puoi anche espandere leggermente la sintassi:
Larghezza del bordo: spessa; stile bordo: solido; colore del bordo: nero;
Inoltre, possono essere utilizzati valori specifici. proprietà del bordo-larghezza, tre parole chiave a: sottile, medio, spesso.
Ma l'uso della sintassi estesa non è sempre pratico. Diamo un'occhiata a un esempio in cui è necessario modificare il colore del bordo della casella al passaggio del mouse. In questo caso, usare la sintassi abbreviata è molto più semplice:
Box (bordo: 1px rosso fisso;) .box: hover (bordo: 1px verde fisso;)
Più elegante e più semplice può essere fatto come segue:
Box (bordo: 1px rosso pieno;) .box: hover (colore del bordo: verde;)
Come puoi vedere, la tecnica avanzata è utile anche quando modifichiamo solo alcune proprietà: larghezza, stile, colore e altre.
Bordo-Raggio
Confine-raggioè la proprietà "d'oro" dei CSS3 - la prima e più comune proprietà che è diventata pratica e utile. Ad eccezione di IE8 e versioni precedenti, tutti i browser rendono gli angoli arrotondati con questo.
Tuttavia, è necessario utilizzare prefissi speciali per Webkit e Mozilla affinché lo stile sia corretto.
Webkit-border-radius: 10px; -moz-border-radius: 10px; raggio di confine: 10px;
Al giorno d'oggi, possiamo rimuovere i prefissi speciali e utilizzare la forma standard del raggio del bordo.
Un altro vantaggio è che possiamo utilizzare valori speciali per ciascun lato del blocco:
Raggio bordo in alto a sinistra: 20 px; bordo-in alto-a destra-raggio: 0; bordo-basso-destra-raggio: 30px; bordo-basso-sinistro-raggio: 0;
Nel codice sopra, l'impostazione del raggio del bordo in alto a destra e del raggio del bordo in basso a sinistra su zero può creare forme sorprendenti. Sebbene l'elemento possa ereditare alcune proprietà che dovranno essere reimpostate a zero.
Come margin e padding, possiamo condensare la sintassi:
/ * a sinistra in alto, in alto a destra, in basso a destra, in basso a sinistra * / border-radius: 20px 0 30px 0;
Ad esempio, utilizzando la proprietà border-radius, ti mostrerò il "limone" che i designer usano spesso quando progettano siti Web:
Limone (larghezza: 200 px; altezza: 200 px; sfondo: # F5F240; bordo: 1 px solido # F0D900; raggio del bordo: 10 px 150 px 30 px 150 px;)
Andare oltre le basi
In molti designer, tutta la conoscenza nel campo proprietà css confine, è lì che finisce. Ma ce ne sono molti altri roba forte con cui puoi creare cose fantastiche!
Strutture di confine css complesse
Esistono molte tecniche per creare disegni utilizzando strutture di bordo complesse. Ad esempio, diamo un'occhiata a quanto segue ...
Stile del bordo
Usiamo sempre le ben note proprietà solido, tratteggiato e punteggiato. Ma ci sono un paio di altre proprietà in stile bordo: groove e ridge.
Bordo: scanalatura 20px # e3e3e3;
O nella sintassi estesa:
Colore bordo: # e3e3e3; larghezza del bordo: 20px; stile bordo: scanalatura;
Sebbene queste proprietà siano utili, non sono la base per frame complessi.
Schema
La tecnica più diffusa per creare un doppio bordo consiste nell'utilizzare la proprietà outline.
Riquadro (bordo: 5px solido # 292929; contorno: 5px solido # e3e3e3;)
Questo metodo funziona alla grande, anche se ci limita a solo due caselle. A volte è necessario creare un bordo sfumato composto da molti livelli... come allora?
Pseudo-elementi
Quando la tecnica del contorno non basta mezzi alternativi consiste nell'usare gli pseudo elementi: prima e: dopo. Con cui puoi aggiungere cornici aggiuntive all'elemento:
Riquadro (larghezza: 200 px; altezza: 200 px; sfondo: # e3e3e3; posizione: relativa; bordo: 10 px verde fisso;) / * Crea due riquadri con il stessa larghezza del contenitore * / .box: dopo, .box: prima (contenuto: ""; posizione: assoluto; sopra: 0; sinistra: 0; fondo: 0; destra: 0;) .box: dopo (bordo: 5px rosso pieno; contorno: 5px giallo pieno;) .box: prima (bordo: 10px blu pieno;)
Non molto elegante in apparenza, ma almeno, Funziona. È un po' problematico capire la sequenza dei colori all'interno del quadro... ma si può capire.
Box-ombra
Un interessante "modo infantile" per creare questo effetto è usare la proprietà box-shadow CSS3:
Box (bordo: 5px rosso pieno; box-shadow: 0 0 0 5px verde, 0 0 0 10px giallo, 0 0 0 15px arancione;)
In questo caso, siamo stati più intelligenti, utilizzando una proprietà box-shadow appositamente progettata. Modificando i parametri x, y, sfocatura a "zero", possiamo usare colori diversi per creare molti fotogrammi.
Ma c'è un problema, nei browser meno recenti che non comprendono le proprietà box-shadow, sarà visibile solo un bordo rosso di 5 pixel.
"Ricorda! Il design del sito web dovrebbe essere cross-browser, cioè lo stesso in tutti i browser. Comprese le vecchie versioni."
Cambiare gli angoli
Oltre all'usato significato semplice border-radius, possiamo specificarne due separati - separandoli con / specificheremo il raggio orizzontale e verticale.
Per esempio:
Raggio del bordo: 50 px / 100 px; / * raggio orizzontale, raggio verticale * /
... è uguale a:
Raggio bordo in alto a sinistra: 50 px 100 px; bordo-in alto-a destra-raggio: 50px 100px; bordo-basso-destra-raggio: 50px 100px; bordo-basso-sinistro-raggio: 50px 100px;
Questa tecnica è adatta per creare forme di blocco uniche. Ad esempio, ecco come creare un effetto carta avvolta:
Box (larghezza: 200 px; altezza: 200 px; sfondo: # 666; bordo-in alto-sinistra-raggio: 15em 1em; bordo-basso-destra-raggio: 15em 1em;)
Forme CSS usando il bordo
Questa tecnica mostra come è possibile creare moduli CSS, utilizzando elementi con dimensioni zero di altezza e larghezza. Sei sorpreso? Vediamo un esempio...
Per i prossimi esempi, utilizzeremo il seguente markup:
... e il seguente stile di base:
Riquadro (larghezza: 200 px; altezza: 200 px; sfondo: nero;)
L'esempio più comune usando i CSS forme - creando una freccia che scorre. Il segreto dietro questa freccia è creare un bordo con colori differenti per ogni lato. Quindi, mettiamo attributi di larghezza e altezza di 0.
Assegna la classe arrow al blocco div:
Freccia (larghezza: 0; altezza: 0; bordo superiore: 100 px rosso fisso; bordo destro: 100 px verde fisso; bordo inferiore: 100 px blu fisso; bordo sinistro: 100 px giallo fisso;)
Per dimostrare, usiamo prima la sintassi estesa. Successivamente, possiamo rimuovere codice extra usando la sintassi abbreviata:
Freccia (larghezza: 0; altezza: 0; bordo: solido 100px; colore del bordo: rosso verde blu giallo;)
Interessante, vero? Ora imposteremo i colori trasparenti su tutti i lati tranne il lato blu.
Freccia (larghezza: 0; altezza: 0; bordo: solido 100px; colore bordo inferiore: blu;)
Si è rivelato fantastico! Ma contraddice layout semantico, crea un div .arrow, solo per aggiungere una freccia alla pagina. A questo scopo, possiamo usare pseudo-elementi, cosa che faremo ora.
Crea un fumetto
Per creare il fumetto, abbiamo bisogno di un piccolo pezzo puro CSS codice e un blocco div.
Speech-bubble (posizione: relativa; colore di sfondo: # 292929; larghezza: 200 px; altezza: 150 px; altezza della linea: 150 px; / * verticalmente al centro * / colore: bianco; allineamento del testo: al centro;)
Fumetto: dopo (contenuto: "";)
A questo punto, creeremo la freccia che abbiamo fatto prima, la aggiungeremo all'elemento e non resta che posizionare:
Fumetto: dopo (contenuto: ""; posizione: assoluto; larghezza: 0; altezza: 0; bordo: 10px solido; colore del bordo: rosso verde blu giallo;)
Se vogliamo che la freccia punti verso il basso, dovremo impostare tutti i bordi come trasparenti tranne quello in alto.
Nuvoletta: dopo (contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 10px solido; colore bordo superiore: rosso;)
Quando creiamo questo Forma CSS, non possiamo specificare la dimensione della freccia in modo specifico. Invece, possiamo impostare la proprietà border-width, che imposterà la dimensione della freccia. Imposteremo anche la posizione della freccia in basso al centro. Di conseguenza, usiamo i valori di top e left per questo.
Fumetto: dopo (contenuto: ""; posizione: assoluto; larghezza: 0; altezza: 0; bordo: 15px solido; bordo-colore superiore: rosso; alto: 100%; sinistra: 50%;)
Inoltre, resta a noi dare il colore uguale a quello del blocco. Ricorda, durante il posizionamento, devi considerare la dimensione di altri bordi invisibili (15px). Daremo anche al blocco angoli arrotondati.
Speech-bubble (/ *… altri stili * / border-radius: 10px;) .speech-bubble: dopo (contenuto: ""; posizione: assoluta; larghezza: 0; altezza: 0; bordo: 15px solido; bordo in alto -color: # 292929; top: 100%; left: 50%; margin-left: -15px; / * regola la larghezza del bordo * /)
Non male, eh? Usando alcune classi CSS e modifiche ai bordi, puoi creare una cosa del genere.
/ * Utilizzo dei fumetti: applica la classe.speech-bubble e.speech-bubble-DIRECTION come mostrato di seguito
Bonus! Centratura verticale all'interno di un blocco
Per una riga di testo, puoi utilizzare l'altezza della riga. Ma se ne hai due o più righe testo ... La migliore soluzione imposterà la proprietà display su table e inserirà tutto il testo nel paragrafo. Ecco come appare markup html:
Speech-bubble (/ * altri stili * / display: table;) .speech-bubble p (display: table-cell; vertical-align: middle;)
Non siamo limitati ai triangoli. I CSS sono in grado di riprodurre tutti i tipi di forme, anche i cuori e un segnale di rischio biologico.
Rischio biologico (larghezza: 0; altezza: 0; bordo: 60px solido; raggio del bordo: 50%; colore del bordo superiore: nero; colore del bordo inferiore: nero; colore del bordo sinistro: giallo; colore del bordo destro: colore: giallo ;)
Conclusione
Per controllare il bordo di un elemento, usa proprietà universale confine. Questa proprietà consente di impostare la larghezza, lo stile e il colore del bordo di un elemento in una singola dichiarazione.
Queste tre proprietà (spessore, stile e colore del bordo) possono essere impostate in un'unica dichiarazione. Ecco un esempio:
È possibile specificare uno stile del bordo su un solo lato di un elemento. Per fare ciò, usa le proprietà border-top (bordo superiore), border-right (bordo destro), border-bottom (bordo inferiore), border-left (bordo sinistro).
In questo esempio, ogni lato della scatola ha uno spessore, uno stile e un colore del bordo diversi.
Pensa come quando Aiuto CSS puoi creare una forma come questa:
I valori del bordo - spessore, stile e colore - possono essere impostati separatamente utilizzando proprietà speciali.
- border-style - lo stile del bordo.
- larghezza del bordo - la larghezza del bordo.
- colore del bordo - colore del bordo.
Consideriamo ciascuno dei valori separatamente.
La proprietà in stile confine. Stile del bordo.
La proprietà border-style imposta lo stile del bordo. In CSS, in Differenze HTML, il bordo di un elemento può essere non solo solido. I valori validi per lo stile del bordo sono:
- nessuno - nessun bordo (predefinito).
- solido - bordo solido.
- doppio - doppio bordo.
- tratteggiato - bordo tratteggiato.
- punteggiato - Un bordo composto da una serie di punti.
- cresta - bordo della cresta.
- scanalatura - bordo della scanalatura.
- inset - un bordo rientrato.
- fin dall'inizio - bordo estruso.
Esempi di come sono.
nessun confine (nessuno)
bordo solido
doppio bordo
bordo punteggiato
bordo tratteggiato
bordo scanalatura
bordo di cresta
bordo inserto
fin dall'inizio
A proposito, se imposti il colore del bordo su nero per la cornice del colmo, ottieni il seguente risultato.
Un div con bordo nero e stile cresta.
Il bordo sembra solido, ma questo perché lo stile della cresta viene creato aggiungendo un effetto ombra esterna nera e l'effetto nero sul bordo nero non è visibile.
Utilizzando la proprietà border-style, lo stile del bordo può essere impostato per più di tutti i lati del blocco. È possibile impostare più valori per una proprietà di stile del bordo, a seconda del numero di valori, lo stile del bordo verrà assegnato a un diverso numero di lati del blocco. È possibile impostare uno, due, tre e quattro valori. Diamo un'occhiata agli esempi per ogni caso.
Un valore (solido): 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 fisso): il primo valore per il lato superiore, il secondo per il lato, il terzo per il fondo.
Quattro valori (solido doppio tratteggiato tratteggiato): ogni valore per un lato in senso orario a partire dall'alto.
La proprietà della larghezza del bordo. Spessore del bordo.
La proprietà border-width viene utilizzata per impostare lo spessore del bordo di un elemento. Lo spessore del bordo può essere specificato in qualsiasi unità di misura assoluta, come i pixel.
Come con la proprietà in stile bordo, anche la proprietà può essere impostata su uno o quattro valori. Diamo un'occhiata agli esempi per ogni caso.
Codice di esempio:
Esistono anche valori di parole chiave per la proprietà di larghezza del bordo. Ce ne sono tre:
- sottile - bordo sottile;
- medio - medio spessore;
- spesso - bordo spesso;
Spessore bordo: sottile.
Spessore bordo: medio.
Spessore bordo: spesso.
La proprietà border-color. Colore del bordo.
La funzione di colore del bordo viene utilizzata per controllare il colore del bordo. I colori per questa proprietà possono essere impostati utilizzando qualsiasi metodo descritto nell'articolo "Colori in CSS", ovvero:
- Notazione esadecimale (# ff00aa) del colore.
- Formato RGB - rgb (255,12,110). Formato RGBA per CSS3.
- formati HSL e HSLA per CSS3.
- Il nome del colore, ad esempio nero. Lista completa i nomi dei colori sono elencati nella tabella dei nomi dei colori CSS.
La proprietà border-color può anche avere da uno a quattro valori e li gestisce allo stesso modo delle proprietà precedenti.
Un valore (rosso).
Due valori (rosso nero).
Tre significati (rosso nero giallo).
Quattro significati (rosso nero giallo blu).
Ora torniamo al problema delineato sopra e disegniamo una forma:
Ecco il codice che disegna una tale forma, solo di dimensioni maggiori:
Impostazione dei valori per i lati separatamente
Come accennato in precedenza, puoi specificare i valori delle proprietà del bordo solo per un lato di un blocco. Per questi scopi, ci sono proprietà:
- border-top (bordo superiore)
- bordo destro (bordo destro)
- bordo-basso (bordo inferiore)
- bordo-sinistro (bordo sinistro)
Lascia che ti ricordi che tutte le proprietà hanno tre valori (spessore, stile e colore) in qualsiasi ordine. Ma ci sono proprietà che ti permettono di impostare lo spessore, il colore e lo stile per ogni lato separatamente. La scrittura di queste proprietà è derivata da quanto sopra.
Opzioni del bordo superiore (bordo-alto).
- border-top-color - Imposta il colore del bordo superiore dell'elemento.
- border-top-width - Imposta lo spessore del bordo superiore dell'elemento.
- border-top-style - Imposta lo stile del bordo superiore di un elemento.
Opzioni del bordo destro (bordo-destro).
- border-right-color - Imposta il colore del bordo destro di un elemento.
- border-right-width - Imposta la larghezza del bordo destro di un elemento.
- border-right-style - Imposta lo stile del bordo destro di un elemento.
Parametri inferiori (bordo-basso).
- border-bottom-color - imposta il colore del bordo inferiore dell'elemento.
- border-bottom-width - Imposta la larghezza del bordo inferiore dell'elemento.
- border-bottom-style - Imposta lo stile del bordo inferiore di un elemento.
Opzioni del bordo sinistro (bordo sinistro).
- border-left-color - Imposta il colore del bordo sinistro dell'elemento.
- border-left-width - Imposta la larghezza del bordo sinistro dell'elemento.
- border-left-style - Imposta lo stile del bordo sinistro dell'elemento.
Un esempio di utilizzo di queste proprietà:
- ridefinito il colore del bordo superiore utilizzando la proprietà border-top-color in rosso,
- usando la proprietà border-right-width imposta lo spessore del bordo destro su 10px,
- utilizzando la proprietà border-bottom-style, lo stile del bordo inferiore viene ridefinito come double,
- utilizzando la proprietà border-left-color, il bordo sinistro è impostato su blu.
Proprietà del raggio di confine. Arrotondamento degli angoli del confine.
La proprietà border-radius serve per arrotondare gli angoli dei bordi di un elemento. Questa proprietà è stata introdotta in CSS3 e funziona correttamente in tutti i browser moderni tranne Internet Explorer 8 (e precedenti).
I valori possono essere qualsiasi numero utilizzato nei CSS.
La proprietà del raggio di confine è 15px.
Se la cornice del blocco non è specificata, l'arrotondamento avviene con lo sfondo. Ecco un esempio di arrotondamento di una casella senza bordo, ma con un colore di sfondo:
La proprietà del raggio di confine è 15px.
Esistono proprietà per arrotondare singolarmente ogni angolo di un elemento. Questo esempio li usa tutti:
Raggio bordo in alto a sinistra: 15 px; bordo-in alto-a destra-raggio: 0; bordo-basso-destra-raggio: 15px; bordo-basso-sinistro-raggio: 0;
La proprietà del raggio di confine è 15px.
Sebbene questo codice possa essere scritto in una dichiarazione: border-radius: 15px 0 15px 0. Il punto è che la proprietà border-radius può essere impostata da uno a quattro valori. La tabella seguente elenca le regole che regolano tali annunci.
Dopo aver studiato attentamente questa tabella, puoi capire che il record più breve dello stile richiesto sarà così: border-radius: 15px 0. Ci sono solo due valori.
Un po' di pratica
Come disegnare un limone usando i CSS.
Ecco il codice per un tale blocco:
Margine: 0 automatico; / * Posiziona il blocco al centro * / width: 200px; altezza: 200px; sfondo: # F5F240; bordo: 1px solido # F0D900; raggio del bordo: 10px 150px 30px 150px;
Abbiamo già disegnato la forma:
Ora lasciamo un triangolo da esso:
Il codice del triangolo è così:
Margine: 0 automatico; / * Posiziona il blocco al centro * / padding: 0px; larghezza: 0px; altezza: 0; bordo: 30px bianco solido; colore bordo-fondo: rosso;
La proprietà CSS border crea un alias per creare il bordo di un oggetto, ovvero lo spessore del bordo, il suo colore e lo stile. Questa proprietà è ampiamente utilizzata in HTML. Puoi creare vari effetti per percepire meglio il contenuto della pagina. Ad esempio, progetta una barra laterale, un'intestazione del sito, un menu, ecc.
1. Sintassi del bordo CSS
confine: bordo-larghezza stile bordo bordo-colore | ereditare;
- larghezza del bordo - spessore del bordo. Puoi impostarlo in pixel (px) o utilizzare i valori standard sottile, medio, spesso (differiscono solo per la larghezza in pixel)
- border-style - lo stile del bordo renderizzato. Può assumere i seguenti valori
- nessuno o nascosto - cancella il confine
- punteggiato - cornice punteggiata
- tratteggiato - cornice tratteggiata
- solido - linea semplice (usata più spesso)
- Doppio - doppia cornice
- scanalatura - bordo scanalato 3D
- cresta, inserto, inizio - vari effetti di cornice 3D
- eredita - viene applicato il valore dell'elemento genitore
- colore del bordo - colore del bordo. Può essere impostato utilizzando un nome di colore specifico o in formato RGB (vedi i nomi dei colori html per il sito)
I valori nella proprietà del bordo CSS possono essere specificati in qualsiasi ordine. La sequenza più comunemente usata è "colore stile spessore".
2. Esempi con bordi CSS differenti
2.1. Esempio. Diversi stili di decorazione del bordo in stile bordo
stile bordo: tratteggiatostile bordo: tratteggiatostile bordo: solidostile bordo: doppiostile bordo: groovestile bordo: crestastile bordo: insertostile bordo: dall'inizioQuattro diverse cornici
stile bordo: punteggiato
stile bordo: tratteggiato
stile bordo: solido
stile bordo: doppio
stile bordo: groove
stile bordo: cresta
stile bordo: inserto
stile bordo: dall'inizio
Quattro diverse cornici
2.2. Esempio. Il colore del bordo cambia al passaggio del mouse
Questo esempio è molto semplice ma interessante. Mostra come la pseudo-classe hover e il bordo CSS possono essere usati per creare effetti semplici(ad esempio, per un menu).
Quando passi il cursore del mouse sul blocco, il colore del bordo cambierà
Ecco come appare sulla pagina:
2.3. Esempio. Come fare un bordo trasparente
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 sotto forma di RGBA (R, G, B, P), dove ultimo parametro la trasparenza è impostata (numero reale da 0,0 a 1,0)
Ecco come appare sulla pagina:
3. Spessore del bordo: la proprietà della larghezza del bordo
Specifica lo spessore della linea. In precedenza, l'abbiamo chiesto in descrizione uniforme confine.
sintassi CSS larghezza del bordo
larghezza del bordo: sottile | medio | spesso | senso;
- sottile - spessore della linea sottile
- medio - larghezza della linea media
- spessore - spessore della linea spessa
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: spessaDiverso spessore ai bordi
Ecco come appare sulla pagina:
larghezza del bordo: sottile
larghezza del bordo: media
larghezza del bordo: spessa
Diverso spessore ai bordi
4. Come fare un bordo con un solo bordo (bordo)
La proprietà del bordo CSS ha proprietà derivate per l'impostazione di bordi unilaterali su un elemento:
- border-top - per impostare il bordo in alto (bordo superiore)
- border-bottom - per impostare il bordo in basso (bordo inferiore)
- border-right - per impostare il bordo a destra (bordo destro)
- border-left - per impostare il bordo a sinistra (bordo sinistro)
Questi confini possono essere combinati, ad es. prescrivere il proprio telaio per ogni direzione. La sintassi è esattamente la stessa di border.
Ci sono anche proprietà
- border-top-color - imposta il colore del bordo superiore
- border-top-style - Imposta lo stile del bordo superiore
- border-top-width - imposta lo spessore del bordo superiore
- eccetera. per ogni direzione
Secondo me, è più facile scrivere tutto in una riga che produrre testo extra negli stili. Ad esempio, seguenti proprietà sarà lo stesso
/* Descrizione di due stili identici: */
4.1. Esempio. Bella cornice per evidenziare le citazioni
Esempio di cornice di citazione
Ecco come appare sulla pagina:
Esempio di cornice di citazione
Nota
Puoi impostare un bordo separato per ogni lato.
5. Come creare più bordi di bordo su un elemento html
A volte è necessario creare più bordi. Facciamo un esempio
5.1. Prima opzione con più bordi
Ecco come appare sulla pagina:
C'è un secondo modo attraverso la sovrapposizione delle ombre.
5.2. Mescolare le ombre per creare più bordi
Ecco come appare sulla pagina:
6. Arrotondamento degli angoli ai bordi (bordo-raggio)
per aver creato belle cornici usa la proprietà CSS border-radius (disponibile solo in CSS3). Con esso puoi arrotondare gli angoli, creando un aspetto completamente diverso. ad esempio
7. Riga rientrata CSS
Le linee rientrate possono sembrare spettacolari sfondo scuro, che non è adatto a tutti i siti.
Ecco come appare sulla pagina:
Per accedere a border da JavaScript, devi scrivere la seguente costruzione:
document.getElementById ("elementID"). style.border= "VALORE" (! LANG:
16 giugno 2016
Grazie a tutti. Oggi ti dirò perché, quando si progettano siti, a volte fanno un bordo trasparente in css, cioè un bordo invisibile di un elemento.
Perché hai bisogno di un bordo trasparente?
Durante il layout del layout successivo, il compito era: quando si passa con il mouse su una voce di menu, dovrebbe avere una sottolineatura. E non per il testo, ma per l'intero blocco con un collegamento. Per coloro che sono esperti nel layout, tutto è abbastanza semplice e chiaro in in questo caso... Devi solo aggiungere la proprietà border-bottom al link quando ci passi sopra con il mouse. Ma se lo fai e basta, non sarà molto bello e bello. Ora ti mostrerò un esempio. qui è così codice html necessario per creare menu semplice di 4 punti:
In generale, gli sono stati prescritti alcuni stili, ma non li darò tutti. Ci interessa l'effetto di sottolineatura quando si passa con il mouse su un elemento. È implementato in questo modo:
Menu li a: hover (bordo in basso: 5px marrone solido;)
Tutto è abbastanza semplice, ma risulta così (passa il mouse su qualsiasi elemento):
D'accordo, non molto carina. Inoltre, alcuni contenuti saranno posizionati sotto e verranno spostati di 5 pixel verso il basso ogni volta che si passa al passaggio del mouse. Come sai, il bordo aumenta la dimensione dell'elemento.
In realtà, per risolvere il problema, è sufficiente impostare inizialmente il collegamento sullo stesso frame con uno spessore di 5 pixel, ma colore trasparente... In questo caso, al passaggio del mouse, cambierà solo il colore della cornice.
Menu li a (bordo in basso: 5px solido trasparente;)
Ho dato solo una proprietà, il resto degli stili non ci interessa, puoi scriverli tu stesso. Ora, quando sei in bilico, non si verificheranno contrazioni, puoi assicurarti di questo:
Ottimo, spero di aver risposto alla domanda, a cosa serve in css cornice trasparente... Forse ha qualche altro uso. O meglio, non possibile, ma certo. Può essere usato per creare triangoli. Come, guarda. Quindi queste sono le opzioni per l'utilizzo di una cornice trasparente.
