Kā pievienot dubultu apmali ar dažādām krāsām?
Lai pievienotu dubultu apmali jebkurai formai, izmantojot CSS, “ : iepriekš ” selektors ir slavens. Tas maina abu apmaļu krāsas, lai padarītu tās unikālas. Tālāk sniegtā soli pa solim procedūra, lai pievienotu dubultu apmali ar dažādām krāsām:
1. darbība: pievienojiet sadalīšanas elementu un piešķiriet klases
HTML failā pievienojiet elementu div tagā
un piešķiriet ' klasē ' ar nosaukumu ' dubultā robeža ”. Lietotāji var izveidot arī savu klases nosaukumu:< div klasē = 'dubultā robeža' >
< / div >
2. darbība. Izveidojiet stila tagu
Šajā darbībā izveidojiet daļu klasei ' dubultā robeža un izveidojiet to vienu kopiju ar ' : iepriekš ” atlasītājs. Tādā veidā CSS rekvizīti tiks piemēroti mūsu klasēm:
< stils >
.double- robeža {
}
.double- robeža : iepriekš {
}
< / stils >
3. darbība: pievienojiet klasei stilus
CSS rekvizīti attiecas uz div elementu, kura klase ir “ dubultā robeža ”. Tālāk ir minēti šādi stili:
.double- robeža {
fons- krāsa : #ccc;
robeža : 4 pikseļi vienkrāsains zaļš;
polsterējums: 50 pikseļi;
platums : 16 pikseļi;
augstums : 16 pikseļi;
pozīcija: relatīvs;
piemale: 0 auto;
}
CSS rekvizītu apraksts ir sniegts zemāk:
- Vispirms pievienojiet ' fona krāsa ', kas ir pelēks un ' robeža ” ar 4 pikseļu svaru un zaļu krāsu.
- ' polsterējums ” 50 pikseļus, lai izveidotu 50 pikseļu iekšējo telpu no visām pusēm.
- Galu galā ' platums ' un ' augstums” no 16 pikseļiem. Arī ' starpība ” ir 0 auto, kas nozīmē, ka augšējā un apakšējā piemale būs nulle un kreisā.
Tīmekļa lapa izskatās šādi:
Izvadā tiek parādīts, ka apmale ir piemērota “div”.
4. darbība: CSS atlasītāja pievienošana
Tagad pārejiet uz stila taga otro lodziņu, kurā ir “ : iepriekš ” pievienots atlasītājs un ierakstiet tālāk norādīto kodu:
.double- robeža : iepriekš {fons : nav;
robeža : 4 pikseļi vienkrāsains zils;
saturu : '' ;
pozīcija: absolūta;
augšpusē: 4 pikseļi;
pa kreisi: 4 pikseļi;
pa labi: 4 pikseļi;
apakšā: 4 pikseļi;
}
Īpašības ir izskaidrotas zemāk:
- Izmantojiet ' pozīciju ” īpašība, lai elementa atrašanās vieta būtu fiksēta.
- Pēc tam ' augšā, pa kreisi, pa labi un apakšā ” definē jaunizveidotā vienuma malu no sākotnējā.
- CSS atlasītājs ar nosaukumu “: pirms tam ” pievieno saturu izvēlētā elementa priekšā.
Izvade izskatās šādi:
Tādā veidā var pievienot dubultu apmali, izmantojot dažādas krāsas.
Secinājums
Lai pievienotu dubultu apmali, vispirms izveidojiet div elementu un piešķiriet to klasei. Pēc tam pievienojiet CSS ' pozīciju ” rekvizīts, kas jāiestata uz relatīvu. Pēc tam pievienojiet tam CSS atlasītāju “:before”, lai lietotāji varētu pievienot saturu pirms izvēlētā elementa. Šajā rokasgrāmatā ir parādīta dažādu krāsu dubulto apmaļu izmantošana.