在 CSS 中结合border-top、border-right、border-left、border-bottom答案

【问题标题】：Combining border-top,border-right,border-left,border-bottom in CSS在 CSS 中结合border-top、border-right、border-left、border-bottom
【发布时间】：2011-03-08 19:21:22
【问题描述】：

有没有办法像超级速记样式一样在 CSS 中组合border-top、border-right、border-left、border-bottom。

例如：

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

【问题讨论】：

标签： css border

【解决方案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;

【讨论】：

谢谢，我可以用它来创造我想要的东西。
当您尝试仅在顶部和底部显示边框时，这非常有用：border-style:solid;边框宽度：1px 0;
您可能希望在第二个 sn-p 中添加分号。
有什么办法可以将所有内容合并到一行中吗？？

【解决方案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;

【讨论】：

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

【解决方案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

【讨论】：

【解决方案4】：

不，您不能将它们设置为单个例如，如果你有分区{ 边框顶部：2px 纯红色；右边框：2px 纯红色；边框底部：2px 纯红色；左边框：2px 纯红色； } 四肢相同的属性，然后你可以在一行中设置它们

div{border:2px solid red;}

【讨论】：

你不觉得，你的观点已经被其他答案回答了吗？