在CSS中组合border-top,border-right,border-left,border-bottom

Question

有没有一种方法可以将CSS中的border-top,border-right,border-left,border-bottom组合起来,就像超级简写风格一样.

例如:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);

Answer 1

不,你不能在一个声明中设置它们.
在一般情况下,您至少需要三个属性:

border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;

但是,这将是非常混乱的.它有四个可读性和可维护性:

border-top:    1px solid  #ff0;
border-right:  2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left:   5px solid  #09f;

Answer 2

你的情况是极端的,但这里有一个解决方案,适合更常见的情况,想要设置少于4个边框完全相同.

border: 1px dashed red; border-width: 1px 1px 0 1px;

这是一个更短,也许更容易阅读

border-top: 1px dashed red;  border-right: 1px dashed red; border-left: 1px dashed red;

要么

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;

Answer 3

我可以解决这个问题，应该有一个速记，比如......

border: 1px solid red top bottom left;

这当然行不通！Kobi的回答给了我一个想法。假设您想做顶部、底部和左侧，而不是右侧。而不是做border-top：border-left：border-bottom：（三个语句）你可以像这样做两个，零抵消了右侧。

border: 1px dashed yellow;
border-width:1px 0 1px 1px;

两个语句而不是三个，小的改进：-D