CSS Rimuovere il bordo
Esempio 01:
Cominciamo con l'illustrazione più elementare della rimozione del bordo da elementi specifici dello script HTML. Per questo, abbiamo iniziato il nostro codice con il tag principale "HTML" dello script HTML. Discutiamo prima il tag "corpo" come mostrato di seguito. Utilizza due titoli delle dimensioni più grandi, "1". Entrambi i titoli sono usati qui con titoli diversi per differenziarli. Inoltre, abbiamo specificato le classi “A” e “B” all'interno dei tag di intestazione separatamente per utilizzare queste classi all'interno dello stile per modellare separatamente entrambe le intestazioni.
All'interno del tag "stile", abbiamo accontentato separatamente entrambe le intestazioni con l'uso delle loro classi "A" e "B". Abbiamo aggiunto l'imbottitura di 10 pixel e la larghezza di 400 pixel per entrambe le intestazioni tramite l'imbottitura e la proprietà. Quindi, abbiamo assegnato un bordo verde solido da 3 pixel alla prima intestazione tramite la proprietà del bordo e per la seconda intestazione, la proprietà del bordo non è stata impostata su nessuno. Salviamo questo script HTML ed eseguiamolo all'interno del browser Chrome.
L'output per questa pagina web è stato visualizzato nella scheda Chrome. La prima intestazione è stata visualizzata con un bordo solido verde di 3 pixel. La seconda intestazione è stata visualizzata senza bordo, la stessa larghezza e un po 'di imbottitura.
Diamo un'occhiata a come un lato di un bordo può essere rimosso dall'elemento utilizzando la proprietà del bordo avanzato. Pertanto, abbiamo aggiornato il codice sopra come mostrato nell'immagine seguente. Abbiamo usato lo stesso etichetta del corpo insieme ai suoi tag interni o intestazioni. All'interno del tag di stile di questo file HTML, abbiamo aggiunto proprietà di margine e imbottitura per diffondere uniformemente le intestazioni sulla pagina web. Quindi, abbiamo usato la proprietà del bordo per entrambe le intestazioni separatamente. Ogni bordo di 3 pixel solido è stato fissato per entrambi. La prima intestazione conterrà un bordo del colore verde e la seconda intestazione conterrà un bordo del colore blu.
Mentre le proprietà di confine-destra e bordo-sinistra dei bordi sono state impostate su "nessuna" per entrambe le intestazioni per rimuovere rispettivamente il lato destro e sinistro dell'intestazione 1 e l'intestazione 2. Salviamo ed eseguiamo questo aggiornamento.
L'uscita ha mostrato due titoli di bordi verdi e blu. Mentre il lato destro del primo bordo e il lato sinistro del secondo bordo viene rimosso. Ciò è accaduto a causa dell'uso della proprietà di confine e di confine a destra dopo aver impostato entrambi su "nessuno".
Esempio 02:
Insieme alla creazione di un bordo solido, puoi anche creare uno schema per qualsiasi elemento specifico di una pagina web HTML senza usare il bordo. Il profilo e i bordi sembrano visibilmente simili ma sono abbastanza diversi nelle proprietà. Usiamo la proprietà del contorno del linguaggio di script HTML per creare uno schema tratteggiato. Useremo lo stesso file HTML senza cambiare gran parte del suo script. Lo stesso corpo con i suoi tag e uno stile abbastanza simile è stato usato. L'unico cambiamento è stato effettuato all'interno del tag di stile in cui abbiamo impostato il CSS per entrambe le intestazioni.
Qui, abbiamo usato la proprietà del contorno per entrambe le intestazioni. Il contorno per la prima intestazione sarebbe di 3 pixel punteggiati di colore blu mentre l'altro intestazione non conterrà alcuna intestazione secondo il valore "nessuno" impostato per la proprietà del contorno. Salviamo e debug questo script HTML per vedere i risultati tramite il codice Visual Studio.
Dopo il debug, abbiamo aperto la pagina HTML nel browser Chrome e ottenuto il risultato mostrato di seguito. La pagina HTML di output mostra la prima intestazione con uno schema tratteggiato e la seconda intestazione senza contorno o bordo.
Si trattava della creazione di uno schema attorno alle intestazioni. Creiamo contorni tratteggiati, punteggiati e solidi per le intestazioni all'interno del codice HTML. Abbiamo usato un totale di 4 paragrafi in questa pagina web usando il tag "P" nel tag del corpo insieme alle loro classi specifiche che sono state specificate, A, B, C e D. All'interno del tag di stile, abbiamo usato le classi per i paragrafi per modellare separatamente ogni paragrafo. La proprietà del margine di proprietà, dell'imbottitura e della larghezza viene utilizzata con gli stessi valori per tutti e tre i paragrafi. Abbiamo utilizzato la proprietà del bordo per il primo paragrafo per creare un paragrafo trattato di colore rosso. La proprietà di confine impostata su "nessuno" è stata utilizzata per il secondo paragrafo per creare un bordo senza confine. La terza proprietà di confine all'interno del “P.Il paragrafo di classe C "è stato utilizzato per impostare il bordo del colore tratteggiato da 3 pixel. Nell'ultimo stile, abbiamo usato la proprietà del bordo per aggiungere il bordo solido di 3 pixel di colore viola attorno alla quarta intestazione di questa pagina. Salviamo questo codice ed eseguiamolo per vedere i risultati.
L'output di questo programma HTML ha mostrato il display di un'intestazione e 4 paragrafi. Il primo paragrafo è circondato da un bordo rosso punteggiato, il secondo non ha bordo, il terzo ha un bordo del colore cioccolato tratteggiato e l'ultimo ha un bordo di colore solido.
Esempio 03:
Diamo un'occhiata al nostro ultimo esempio per rimuovere un confine dal tavolo che circonda. Per questo, useremo due tabelle per il confronto. All'interno del tag corporeo di questo file HTML, abbiamo utilizzato due tag separati per creare tabelle. Entrambe le tabelle hanno le stesse colonne di intestazione e le stesse colonne di dati, 3 colonne e 3 righe. Abbiamo assegnato diversi "ID" a entrambe le tabelle per differenziarle all'interno del tag di stile, a e b.
All'interno del tag di stile, abbiamo utilizzato lo stesso margine, imbottitura e proprietà del bordo per entrambe le tabelle. Per la classe "B" della Tabella 2, abbiamo utilizzato la proprietà di bordo di proprietà impostata per "crollare" per crollare il bordo di una tabella. Salviamo ed eseguiamo questo codice ora.
L'output per questo codice HTML ha visualizzato due tabelle statiche. Il primo è con il bordo interno ed esterno mentre il secondo ha il suo bordo crollato.
Conclusione:
Questo articolo ha introdotto l'uso della proprietà di frontiera per rimuovere uno o più lati dei bordi attorno a qualsiasi elemento di una pagina Web HTML. Abbiamo discusso di come possano essere utilizzate le proprietà di frontiera, confine, bordo, bordo e bordo-bordo. Abbiamo anche discusso dell'uso del bordo e del profilo all'interno di questi esempi e abbiamo discusso di come una proprietà di collasso di frontiera può essere utilizzata per la rimozione dei bordi attorno all'elemento del tavolo. Abbiamo aggiunto le illustrazioni più semplici per i lettori per raggiungere il livello di comprensibilità.