Hvordan får Du Satt en Grense på Tre Sider av et Element?

0
11

Jeg så en liten samtale om dette den andre dagen, og tenkte det ville være morsomt å se på alle de forskjellige måtene å gjøre det. Ingen av dem er spesielt vanskelige, men kanskje du vil favorisere det ene over en annen for klarhet i syntaks, effektivitet, eller på annen måte.

La oss anta at vi vil ha en ramme på bunn, venstre og høyre (men ikke topp) av et element.

Uttrykkelig erklærer hver side

.tre sider {
border-bottom: 2px solid svart;
border-right: 2px solid svart;
border-left: 2px solid svart;
}

Mens det er ganske klart, er det fortsatt gjør bruk av skriftspråk. Helt utvidet det ville være som dette:

.tre sider {
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-bredde: 2px;

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

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

Slå ut av en av sidene

Du kan spare litt koden ved å erklære grensen på alle fire sider, med stenografi og deretter fjerne det du ikke vil ha:

.tre sider {
border: 2px solid svart;
border-top: 0;
}

Står bare bredden

.tre sider {
border-color: black;
border-style: solid;
/* topp, høyre, bunn -, venstre – akkurat som margin og padding */
border-width: 0 2px 2px 2px;
}

Som et morsomt lite bortsett her, trenger du ikke å erklære grensen farge for å få en kant til å dukke opp, fordi fargen vil arve currentColor! Så dette ville fungere fint:

.tre sider {
/* ingen farge erklært */
border-style: solid;
border-width: 0 2px 2px 2px;
}

Og du vil ha røde grenser hvis du gjorde det:

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

Merkelig, men sant.

Hvis du ønsker å legge til farge explicity, kan du ganske mix-og-match skriftspråk, slik at dette vil fungere fint:

.tre sider {
border: solid grønt;
border-width: 2px 0 2px 2px;
}