Hoe Leg Je een Grens op Drie Zijden van een Element?

0
29

Ik zag een kleine conversatie over dit, de andere dag en dacht dat het leuk zou zijn om te kijken naar alle verschillende manieren om het te doen. Geen van hen is bijzonder lastig, maar misschien zult u voorkeur voor een over de ander, voor de duidelijkheid van de syntaxis, efficiency, of anders.

Stel, we willen een rand aan de onderkant, links en rechts (maar niet top) van een element.

Verklaren hierbij uitdrukkelijk elke kant

.van drie kanten {
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}

Dat is vrij duidelijk, het is nog steeds gebruik te maken van afkortingen. Volledig uitgebreid zou worden als deze:

.van drie kanten {
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 2px;

border-left-color: black;
border-left-style: solid;
border-left-width: 2px;

border-right-color: black;
border-right-style: solid;
border-right-width: 2px;
}

Knock off een van de zijden

U kunt het opslaan van een beetje code door te verklaren dat de rand aan alle vier de zijden met steno en vervolgens het verwijderen van de degene die je niet wilt:

.van drie kanten {
border: 2px solid black;
border-top: 0;
}

Shorthand alleen de breedte

.van drie kanten {
border-color: black;
border-style: solid;
/* boven, rechts, onder, links, net zoals marge en padding */
border-width: 0 2px 2px 2px;
}

Als een leuke zijsprong hier, je hoeft niet te verklaren dat de grens van kleur om een grens aan te tonen, omdat de kleur zal erven de currentColor! Dus dit zou prima werken:

.van drie kanten {
/* geen kleur verklaard */
border-style: solid;
border-width: 0 2px 2px 2px;
}

En je wilt hebben een rode rand als u:

.van drie kanten {
kleur: rood;
border-style: solid;
border-width: 0 2px 2px 2px;
}

Vreemd, maar waar.

Als u de kleur wilt toevoegen expliciet, kunt u een beetje mix-en-match steno, dus dit zal prima werken:

.van drie kanten {
border: solid green;
border-width: 2px 0 2px 2px;
}