Cum să adăugați un chenar dublu cu diferite culori?
Pentru a adăuga un chenar dublu pe orice formă folosind CSS, „ :inainte de Selectorul este celebru. Schimbă culorile ambelor margini pentru a le face unice. Procedura pas cu pas furnizată mai jos pentru a adăuga un chenar dublu cu culori diferite:
Pasul 1: Adăugați elementul Div și atribuiți clase
În fișierul HTML, adăugați elementul div în interiorul etichetei
și atribuiți un „ clasă ” cu numele de ” dublă chenar ”. Utilizatorii își pot crea și propriul nume de clasă:< div clasă = „bord dublu” >
< / div >
Pasul 2: Creați etichetă de stil
În acest pas, creați o porțiune pentru clasa „ dublă chenar ” și faceți-o o copie cu „ :inainte de ” selector. În acest fel, proprietățile CSS vor fi aplicate claselor noastre:
< stil >
.dubla- frontieră {
}
.dubla- frontieră :inainte de {
}
< / stil >
Pasul 3: Adăugați stiluri la clasă
Proprietățile CSS se aplică elementului div care are o clasă „ dublă chenar ”. Următoarele stiluri sunt menționate mai jos:
.dubla- frontieră {
fundal- culoare : #ccc;
frontieră : 4px verde continuu;
umplutură: 50px;
lăţime : 16px;
înălţime : 16px;
poziție: relativă;
marja: 0 auto;
}
Descrierea proprietăților CSS este dată mai jos:
- Mai întâi, adăugați „ culoare de fundal „care este gri și „ frontieră ” de 4px greutate și culoare verde.
- „ căptușeală ” de 50px pentru a crea spațiul interior de 50px din toate părțile.
- În cele din urmă, „ lăţime ' și ' înălţime' de 16px. De asemenea ' marginea ” este 0 automat, ceea ce înseamnă că marginile de sus și de jos vor fi zero și stânga.
Pagina web arată astfel:
Ieșirea afișează că chenarul este aplicat la „div”.
Pasul 4: Adăugarea selectorului CSS
Acum, deplasați-vă către a doua casetă din eticheta de stil care are „ :inainte de ” selector atașat și scrieți codul de mai jos:
.dubla- frontieră :inainte de {fundal : nici unul;
frontieră : 4px albastru solid;
conţinut : '' ;
poziție: absolută;
sus: 4px;
stânga: 4px;
dreapta: 4px;
jos: 4px;
}
Proprietățile sunt explicate mai jos:
- Folosește ' poziţie ” proprietate de a face poziția unui element fixă.
- După aceea, „ sus, stânga, dreapta și jos ” definește marginea articolului nou creat față de cel original.
- Un selector CSS numit „: inainte de ” adaugă conținut în fața unui element ales.
Ieșirea arată astfel:
Așa se poate adăuga un chenar dublu folosind diferite culori.
Concluzie
Pentru a adăuga un chenar dublu, creați mai întâi un element div și atribuiți-l unei clase. Apoi, adăugați CSS „ poziţie ” proprietate care trebuie setată la relativă. După aceea, adăugați selectorul CSS „:before” la acesta, astfel încât utilizatorii să poată adăuga conținut înaintea unui element ales. Acest ghid a demonstrat utilizarea chenarelor duble cu diferite culori.