Gibt es eine Möglichkeit, Border-Top, Border-Right, Border-Left, Border-Bottom in CSS wie einen Super-Shorthand-Stil zu kombinieren?
z.B:
border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
Antworten:
Nein, Sie können nicht alle in einer einzigen Anweisung festlegen.
Im allgemeinen Fall benötigen Sie mindestens drei Eigenschaften:
border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;
Das wäre jedoch ziemlich chaotisch. Mit vier wäre es besser lesbar und wartbar:
border-top: 1px solid #ff0;
border-right: 2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left: 5px solid #09f;
Ihr Fall ist extrem, aber hier ist eine Lösung für andere, die zu einem häufigeren Szenario passt, bei dem weniger als 4 Ränder genau gleich gestaltet werden sollen.
border: 1px dashed red; border-width: 1px 1px 0 1px;
das ist etwas kürzer und vielleicht leichter zu lesen als
border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red;
oder
border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
Ich kann mich auf das Problem beziehen, es sollte eine Abkürzung geben wie ...
border: 1px solid red top bottom left;
Das funktioniert natürlich nicht! Kobis Antwort brachte mich auf eine Idee. Angenommen, Sie möchten oben, unten und links, aber nicht rechts. Anstatt border-top: border-left: border-bottom: (drei Anweisungen) zu machen, könnten Sie zwei davon so machen, die Null wird auf der rechten Seite gelöscht.
border: 1px dashed yellow;
border-width:1px 0 1px 1px;
Zwei statt drei Aussagen, kleine Verbesserung :-D
Nein, Sie können sie nicht als einzelne festlegen, wenn Sie beispielsweise div {border-top: 2px solid red; Rand rechts: 2px durchgehend rot; Rand unten: 2px durchgehend rot; Rand links: 2px durchgehend rot; } gleiche Eigenschaften für alle vier, dann können Sie sie in einer Zeile festlegen
div{border:2px solid red;}