Gli sviluppatori possono applicare più proprietà CSS per rendere le loro pagine web più attraenti, come ' altezza ' E ' larghezza 'proprietà per l'impostazione delle dimensioni,' allineamento del testo ” per regolare il testo, “ stile del bordo ' E ' bordo-raggio ” proprietà per impostare il bordo intorno all'elemento. Inoltre, puoi aggiungere un bordo in base alle tue esigenze, ad esempio su un lato dell'elemento, solo per rendere più visibili le cose dietro gli oggetti.
Questo post dimostrerà:
Metodo 1: imposta il bordo su un lato
In CSS, gli utenti possono impostare il bordo su un lato dell'elemento desiderato. A tal fine il “ bordo sinistro ”, “ confine-destra ”, “ bordo superiore ' E ' bordo inferiore Le proprietà ” vengono utilizzate per aggiungere bordi a sinistra, a destra, in alto o in basso.
In questa sezione, imposteremo specificamente il bordo sul lato sinistro del contenitore. Per fare ciò, seguire le istruzioni riportate di seguito.
Passaggio 1: creare un contenitore div
Innanzitutto, crea un contenitore div con l'aiuto del ' Passaggio 2: inserire l'intestazione Successivamente, utilizzare il '< h1> ” per aggiungere un'intestazione all'interno del contenitore div. Inoltre, puoi anche utilizzare altri tag di intestazione in base al requisito, come '< h1> ” a “< h6> tag: Ora accedi al contenitore div HTML e accedi al nome della classe. Per farlo, un selettore di classe “ # ” viene utilizzato con il nome della classe. Passaggio 4: inserire il bordo solo su un lato Dopo aver effettuato l'accesso al contenitore div, applica le proprietà CSS indicate di seguito: L'immagine risultante mostra il bordo con un solo lato: Per impostare il bordo su tutti i lati con colori diversi, utilizza il codice HTML sopra. Quindi, accedi al contenitore div con l'aiuto del nome id e del selettore: Di conseguenza, verrà applicato il bordo con stili diversi su ciascun lato: Per impostare il bordo solo su un lato, per prima cosa crea un div usando '
< h1 > Confine su un lato h1 >
div >
Si può vedere che il contenitore è stato creato con successo:
Passaggio 3: accedere al contenitore div
bordo sinistro: 5px solido rosso ;
sfondo: rgb ( 56 , 239 , 245 ) ;
margine: 20px 100px;
larghezza: 200px; altezza: 150px
}
Qui:
Metodo 2: imposta il bordo su tutti i lati con stili diversi
margine: 80px;
larghezza del bordo: 8px 2px 1px 10px;
raggio del bordo: 50px;
stile del bordo: inserto pieno doppio punteggiato;
colore del bordo: rgb ( 40 , 5 , 235 ) rgb ( 238 , 146 , 9 ) rgb ( 255 , 0 , 242 ) rgb ( 19 , 19 , 18 ) ;
}
Nel codice sopra fornito:
In questo articolo, hai imparato diversi modi per impostare il bordo CSS su uno e più lati. Conclusione