Hur Gör Du för att Sätta en Gräns på Tre Sidor av ett Element?

0
12

Jag såg en liten konversation om det här häromdagen och tänkte det skulle vara kul att titta på alla de olika sätt att göra det. Ingen av dem är särskilt knepiga, men ni kanske får en fördel över en annan tydlig syntax, effektivitet, eller på annat sätt.

Låt oss anta att vi vill ha en border i botten, vänster och höger men inte toppen) av ett element.

Uttryckligen deklarera varje sida

.tre sidor {
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}

Medan det är ganska tydligt, det är fortfarande att använda sig av stenografi. Helt utökad det skulle vara så här:

.tre sidor {
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;
}

Slå ut en av sidorna

Du kan spara en liten kod genom att förklara gränsen på alla fyra sidor med stenografi och sedan ta bort de du inte vill ha:

.tre sidor {
border: 2px solid black;
border-top: 0;
}

Stenografi bara den bredd

.tre sidor {
border-color: black;
border-style: solid;
/* top, right, bottom, left – precis som marginal och padding */
border-width: 0 2px 2px 2px;
}

Som en kul lite åt sidan här, du behöver inte förklara border färg för att få en kant för att visa upp, eftersom färgen kommer att ärva currentColor! Så detta skulle fungera bra:

.tre sidor {
/* nr färg deklarerade */
border-style: solid;
border-width: 0 2px 2px 2px;
}

Och du skulle ha röda gränser om du gjorde det:

.tre sidor {
border-color: red;
border-style: solid;
border-width: 0 2px 2px 2px;
}

Konstigt, men sant.

Om du vill lägga till färg explicity, du kan kinda mix-and-match stenografi, så detta kommer att fungera bra:

.tre sidor {
border: solid grön;
border-width: 2px 0 2px 2px;
}