Hogyan adjunk hozzá dupla szegélyt különböző színekkel?
Ha kettős szegélyt szeretne hozzáadni bármely alakzathoz CSS használatával, a „ :előtt ” választó híres. Mindkét szegély színét megváltoztatja, hogy egyedivé tegye őket. Az alábbiakban ismertetett lépésenkénti eljárás segítségével kettős szegélyt adhat hozzá különböző színekkel:
1. lépés: Div elem hozzáadása és osztályok hozzárendelése
A HTML-fájlban adja hozzá a div elemet a
címkén belül, és rendeljen hozzá egy ' osztály 'a következő névvel: ' kettős határ ”. A felhasználók létrehozhatják saját osztálynevüket is:< div osztály = 'kettős határ' >
< / div >
2. lépés: Stíluscímke létrehozása
Ebben a lépésben hozzon létre egy részt az osztály számára kettős határ ” és készítsen belőle egy példányt a „ :előtt ” választó. Ily módon a CSS-tulajdonságok az osztályainkra vonatkoznak:
< stílus >
.kettős- határ {
}
.kettős- határ :előtt {
}
< / stílus >
3. lépés: Adjon stílusokat az osztályhoz
A CSS tulajdonságok a div elemre vonatkoznak, amelynek osztálya ' kettős határ ”. Az alábbiakban a következő stílusokat említjük:
.kettős- határ {
háttér- szín : #ccc;
határ : 4px egyszínű zöld;
padding: 50px;
szélesség : 16 képpont;
magasság : 16 képpont;
pozíció: relatív;
árrés: 0 auto;
}
A CSS-tulajdonságok leírása az alábbiakban található:
- Először adja hozzá a „ háttérszín ' ami szürke és a ' határ ” 4 képpont súlyú és zöld színű.
- A ' párnázás ” 50 képpont méretű, hogy minden oldalról 50 képpontos belső teret hozzon létre.
- Végül a „ szélesség ” és „ magasság' 16 képpontból. Továbbá a „ árrés ” 0 auto, ami azt jelenti, hogy a felső és alsó margó nulla és bal.
A weboldal így néz ki:
A kimeneten megjelenik, hogy a keret a „div”-re van alkalmazva.
4. lépés: CSS Selector hozzáadása
Most lépjen a stíluscímke második mezője felé, amelyen a ' :előtt ” választó csatolva, és írja be az alábbi kódot:
.kettős- határ :előtt {háttér : egyik sem;
határ : 4px egyszínű kék;
tartalom : '' ;
pozíció: abszolút;
felső: 4px;
balra: 4px;
jobbra: 4px;
alsó: 4px;
}
A tulajdonságokat az alábbiakban ismertetjük:
- Használja a ' pozíció ” tulajdonság egy elem helyzetének rögzítéséhez.
- Ezt követően a „ fent, balra, jobbra és lent ” határozza meg az újonnan létrehozott elem margóját az eredetihez képest.
- Egy CSS-szelektor, melynek neve „: előtt ” tartalmat ad a kiválasztott elem elé.
A kimenet így néz ki:
Így lehet dupla szegélyt hozzáadni különböző színekkel.
Következtetés
Dupla szegély hozzáadásához először hozzon létre egy div elemet, és rendelje hozzá egy osztályhoz. Ezután adja hozzá a CSS-t ' pozíció ” tulajdonság, amelyet relatívra kell állítani. Ezt követően adja hozzá a „:before” CSS-választót, hogy a felhasználók tartalmat adhassanak hozzá a kiválasztott elem elé. Ez az útmutató bemutatja a kettős szegélyek használatát különböző színekkel.