Wie Setzen Sie einen Rand auf Drei Seiten von einem Element?

0
9

Ich sah ein kleines Gespräch über dies den anderen Tag und dachte, es wäre lustig zu sehen, all die verschiedenen Möglichkeiten, es zu tun. Keiner von Ihnen sind besonders schwierig, aber vielleicht werden Sie zugunsten der einen oder anderen für Klarheit der syntax, der Effizienz, oder anders.

Angenommen, wir wollen eine Grenze an der Unterseite, Links und rechts (aber nicht top) eines Elements.

Ausdrücklich auf jeder Seite

.drei-Seiten {
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
}

Zwar ist das ziemlich klar, es ist immer noch die Nutzung der Kürzel. Komplett ausgebaut, es wäre so:

.drei-Seiten {
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 auf eine der Seiten

Sie können sparen Sie ein wenig code, indem er die Grenze auf allen vier Seiten mit Kürzel und dann entfernen, die Sie nicht wollen:

.drei-Seiten {
border: 2px solid black;
border-top: 0;
}

Die Kurzform nur die Breite

.drei-Seiten {
border-color: black;
border-style: solid;
/* oben, rechts, unten, Links – genau wie margin und padding */
border-width: 0 2px 2px 2px;
}

Als ein wenig Spaß beiseite hier, Sie brauchen nicht zu erklären, dass die border-Farbe um eine Grenze zu zeigen, weil die Farbe, Erben die currentColor! So würde das funktionieren:

.drei-Seiten {
/* keine Farbe deklariert */
border-style: solid;
border-width: 0 2px 2px 2px;
}

Und Sie hätte rote Grenzen wenn du hast:

.drei-Seiten {
Farbe: rot;
border-style: solid;
border-width: 0 2px 2px 2px;
}

Seltsam, aber wahr.

Wenn Sie wollen, um die Farbe hinzuzufügen ausdrücklich, Sie können sich ein bisschen, mix-and-match-Kürzel, so wird es funktionieren:

.drei-Seiten {
border: solid green;
border-width: 2px 0 2px 2px;
}