Com afegir una vora doble amb diferents colors?
Per afegir una vora doble a qualsevol forma mitjançant CSS, el ' :abans ”El selector és famós. Canvia els colors d'ambdues vores per fer-les úniques. El procediment pas a pas que es proporciona a continuació per afegir una vora doble amb diferents colors:
Pas 1: afegiu l'element Div i assigneu classes
Al fitxer HTML, afegiu l'element div dins de l'etiqueta
i assigneu un ' classe ' amb el nom de ' doble frontera ”. Els usuaris també poden crear el seu propi nom de classe:< div classe = 'doble frontera' >
< / div >
Pas 2: creeu una etiqueta d'estil
En aquest pas, creeu una part per a la classe ' doble frontera ' i feu-ne una còpia amb el ' :abans ” selector. D'aquesta manera, les propietats CSS s'aplicaran a les nostres classes:
< estil >
.doble- frontera {
}
.doble- frontera :abans {
}
< / estil >
Pas 3: afegiu estils a la classe
Les propietats CSS s'apliquen a l'element div que té una classe de ' doble frontera ”. A continuació s'esmenten els estils següents:
.doble- frontera {
fons- color : #ccc;
frontera : 4px verd sòlid;
farciment: 50px;
amplada : 16 píxels;
alçada : 16 píxels;
posició: relatiu;
marge: 0 automàtic;
}
La descripció de les propietats CSS es dóna a continuació:
- Primer, afegiu ' color de fons ' que és gris i el ' frontera ” de 4px de pes i color verd.
- El ' farciment ” de 50px per crear l'espai interior de 50px des de tots els costats.
- Al final, el ' amplada ' i ' alçada” de 16 píxels. També, el ' marge ” és 0 automàtic, el que significa que els marges superior i inferior seran zero i esquerre.
La pàgina web té aquest aspecte:
La sortida mostra que la vora s'aplica a 'div'.
Pas 4: Addició del selector CSS
Ara, aneu cap al segon quadre de l'etiqueta d'estil que té el ' :abans ” selector adjunt i escriviu el codi següent:
.doble- frontera :abans {fons : cap;
frontera : 4px blau sòlid;
contingut : '' ;
posició: absoluta;
superior: 4px;
esquerra: 4px;
dreta: 4px;
inferior: 4px;
}
Les propietats s'expliquen a continuació:
- Utilitzar el ' posició ” propietat per fixar la posició d'un element.
- Després d'això, el ' superior, esquerra, dreta i inferior ” defineix el marge de l'element acabat de crear respecte de l'original.
- Un selector CSS anomenat ': abans ” afegeix contingut davant d'un element escollit.
La sortida es veu com:
Així és com es pot afegir una vora doble amb diferents colors.
Conclusió
Per afegir una vora doble, primer creeu un element div i assigneu-lo a una classe. A continuació, afegiu el CSS ' posició ” propietat que s'ha d'establir com a relativa. Després d'això, afegiu-hi el selector CSS ':before' perquè els usuaris puguin afegir contingut abans d'un element escollit. Aquesta guia ha demostrat l'ús de vores dobles amb diversos colors.