Kaip pridėti dvigubą kraštą skirtingomis spalvomis?
Norėdami pridėti dvigubą kraštinę bet kuriai formai naudodami CSS, „ : prieš “ selektorė yra žinoma. Tai pakeičia abiejų kraštinių spalvas, kad jos būtų unikalios. Toliau pateikta nuosekli procedūra, skirta pridėti dvigubą skirtingų spalvų kraštą:
1 veiksmas: pridėkite Div elementą ir priskirkite klases
HTML faile pridėkite elementą div į žymą
ir priskirkite „ klasė “ su pavadinimu “ dviguba siena “. Vartotojai taip pat gali susikurti savo klasės pavadinimą:< div klasė = 'dvipusis' >
< / div >
2 veiksmas: sukurkite stiliaus žymą
Šiame žingsnyje sukurkite dalį klasei ' dviguba siena “ ir padarykite vieną kopiją su „ : prieš “ parinkiklis. Tokiu būdu CSS ypatybės bus pritaikytos mūsų klasėms:
< stilius >
.double- siena {
}
.double- siena : prieš {
}
< / stilius >
3 veiksmas: pridėkite stilių į klasę
CSS savybės taikomos div elementui, kurio klasė yra ' dviguba siena “. Toliau nurodyti stiliai:
.double- siena {
fonas- spalva : #ccc;
siena : 4px vientisa žalia;
pamušalas: 50 pikselių;
plotis : 16 pikselių;
aukščio : 16 pikselių;
padėtis: santykinė;
marža: 0 automatinis;
}
CSS ypatybių aprašymas pateikiamas žemiau:
- Pirmiausia pridėkite ' fono spalva “, kuri yra pilka ir “ siena “ 4 pikselių svorio ir žalios spalvos.
- „ kamšalas “ 50 pikselių, kad iš visų pusių būtų sukurta 50 pikselių vidinė erdvė.
- Pabaigoje „ plotis “ ir „ aukštis“ 16 pikselių. Taip pat „ marža “ yra 0 automatinis, o tai reiškia, kad viršutinė ir apatinė paraštės bus nulinės ir kairėn.
Tinklalapis atrodo taip:
Išvestis rodo, kad kraštinė taikoma „div“.
4 veiksmas: CSS parinkiklio pridėjimas
Dabar pereikite prie antrojo stiliaus žymos langelio, kuriame yra „ : prieš “ pridėtas parinkiklis ir parašykite žemiau esantį kodą:
.double- siena : prieš {fone : nė vienas;
siena : 4px vientisa mėlyna;
turinys : '' ;
padėtis: absoliuti;
viršuje: 4px;
kairėje: 4px;
dešinėje: 4 pikseliai;
apačioje: 4px;
}
Savybės paaiškintos žemiau:
- Naudoti ' padėtis ” savybę, kad elemento padėtis būtų fiksuota.
- Po to „ viršuje, kairėje, dešinėje ir apačioje “ apibrėžia naujai sukurto elemento paraštę nuo pradinio.
- CSS parinkiklis, vadinamas „: prieš “ prideda turinį prieš pasirinktą elementą.
Išvestis atrodo taip:
Taip naudojant skirtingas spalvas galima pridėti dvigubą kraštelį.
Išvada
Norėdami pridėti dvigubą kraštinę, pirmiausia sukurkite div elementą ir priskirkite jį klasei. Tada pridėkite CSS ' padėtis “ nuosavybė, kuri turi būti nustatyta kaip santykinė. Po to pridėkite prie jo CSS parinkiklį „:befor“, kad vartotojai galėtų pridėti turinį prieš pasirinktą elementą. Šiame vadove parodytas dvigubų įvairių spalvų kraštinių naudojimas.