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

72

有没有一种方法可以像超级速记样式一样在CSS中组合border-top，border-right，border-left，border-bottom。

例如：

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

css

— 斯塔克斯
source

142

不，您不能在一个语句中全部设置它们。
通常，您至少需要三个属性：

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;

— 科比
source

谢谢，我可以用它来创建我想要的东西。

— Starx 2010年

3

当您尝试仅在顶部和底部显示边框时，这确实非常好：border-style：solid; border-width：1px 0;

— BananaNeil

您可能要在第二个片段中添加分号。

— kytwb '16

有什么办法可以将所有内容整合到一行中？

— inyee

19

您的案例是一个极端的案例，但是这里是针对其他案例的一种解决方案，它适合一种更常见的情况，即要样式少于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;

— DG
source

我认为第一行代码是更好的选择，它可以节省很多字节，尤其是在带有很多边框的大型CSS文件中。

— Envayo

4

我可以解决这个问题，应该有一个简写如...

border: 1px solid red top bottom left;

当然不行！科比的回答给了我一个主意。假设您想做上，下和左，但不做对。不用做border-top：border-left：border-bottom :（三个语句），您可以这样做两个，而零则取消右侧。

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

用两个语句代替三个语句，这是很小的改进：-D

— PJ布鲁内特
source

0

不，例如，如果您有div {border-top：2px solid red; 右边框：2px纯红色；边框底部：2px稳定红色；左边框：2px纯红色；}具有相同的属性，那么您可以在一行中设置它们

div{border:2px solid red;}

— 尼特什·阿加瓦尔
source

7

您不认为您的观点已经被其他答案回答了吗？

— Starx 2012年

-6

或者，如果所有边框都具有相同的样式，则只需：

border:10px;

— 韦伯
source