Kuinka lisätä kaksoisreunus eri väreillä?
Jos haluat lisätä kaksoisreunuksen mihin tahansa muotoon CSS:n avulla, ' :ennen ”valitsin on kuuluisa. Se muuttaa molempien reunusten värejä tehdäkseen niistä ainutlaatuisia. Alla oleva vaiheittainen toimenpide kaksoisreunuksen lisäämiseksi eri väreillä:
Vaihe 1: Lisää Div-elementti ja määritä luokat
Lisää HTML-tiedostoon div-elementti
-tunnisteen sisään ja määritä ' luokkaa 'nimellä' kaksinkertainen rajaus ”. Käyttäjät voivat myös luoda oman luokkanimen:< div luokkaa = 'kaksirajainen' >
< / div >
Vaihe 2: Luo tyylitunniste
Luo tässä vaiheessa osa luokalle ' kaksinkertainen rajaus ' ja tee siitä yksi kopio ' :ennen ” valitsin. Tällä tavalla CSS-ominaisuuksia sovelletaan luokkiimme:
< tyyli >
.kaksinkertainen- rajaa {
}
.kaksinkertainen- rajaa :ennen {
}
< / tyyli >
Vaihe 3: Lisää tyylejä luokkaan
CSS-ominaisuudet koskevat div-elementtiä, jonka luokka on ' kaksinkertainen rajaus ”. Seuraavat tyylit mainitaan alla:
.kaksinkertainen- rajaa {
tausta- väri : #ccc;
rajaa : 4px kiinteä vihreä;
täyte: 50px;
leveys : 16px;
korkeus : 16px;
asema: suhteellinen;
marginaali: 0 auto;
}
CSS-ominaisuuksien kuvaus on annettu alla:
- Lisää ensin ' taustaväri ', joka on harmaa ja ' rajaa 4px paino ja vihreä väri.
- ' pehmuste 50 pikseliä luodaksesi 50 kuvapisteen sisätilan joka puolelta.
- Lopulta ' leveys ' ja ' korkeus' 16 pikseliä. Myös ' marginaali ” on 0 auto, mikä tarkoittaa, että ylä- ja alamarginaalit ovat nolla ja vasen.
Nettisivu näyttää tältä:
Tulos näyttää, että reunaa käytetään 'div'.
Vaihe 4: CSS-valitsimen lisääminen
Siirry nyt kohti toista laatikkoa tyylitunnisteessa, jossa on ' :ennen ” valitsin liitettynä ja kirjoita alla oleva koodi:
.kaksinkertainen- rajaa :ennen {tausta : ei mitään;
rajaa : 4px tasainen sininen;
sisältö : '' ;
sijainti: absoluuttinen;
yläreuna: 4px;
vasen: 4px;
oikea: 4px;
pohja: 4px;
}
Ominaisuudet on selitetty alla:
- Käytä ' asema ”-ominaisuutta, joka tekee elementin sijainnin kiinteäksi.
- Sen jälkeen ' ylhäällä, vasemmalla, oikealla ja alhaalla ” määrittää juuri luodun kohteen marginaalin alkuperäisestä.
- CSS-valitsin nimeltä ': ennen ” lisää sisältöä valitun elementin eteen.
Tulos näyttää tältä:
Näin voidaan lisätä kaksoisreunus eri väreillä.
Johtopäätös
Jos haluat lisätä kaksoisreunuksen, luo ensin div-elementti ja määritä se luokkaan. Lisää sitten CSS ' asema ”-ominaisuus, joka on asetettava suhteelliseksi. Lisää sen jälkeen siihen CSS-valitsin ':befor', jotta käyttäjät voivat lisätä sisältöä ennen valittua elementtiä. Tämä opas on osoittanut kaksoisreunusten käytön eri väreillä.