Question

我有这个工作的CSS但我喜欢把它变成一行，是否可能？

border-radius: 0;
border-color: #ccc;
border-width: 0 0 2px 0;
border-style: none none solid none;

Answer 1

这篇简短的文章介绍了您在日常工作中遇到的各种CSS速记。

<强>边界

border可让您设置border width，style和color。

<强>更新

正如@torazaburo指出，它实际上需要border: 0 none #ccc才能正确，并且添加border-radius: 0因为它不是边界速记的一部分。

#example {
  border: 0 none #ccc;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
}

如果以下问题不是以下问题，那么以下内容可以采用级联中其他规则的非底部边框宽度和样式，那么这应该没问题：

#example {
    border-bottom: 2px solid #ccc;
}

生成您想要的相同CSS：

Answer 2

如果您只是尝试

border-bottom: 2px solid #ccc;

它可能会从级联中的其他规则获取非底部边框宽度和样式。如果这不是问题，那么上述情况就没问题了。

唯一可靠的方式与你提出的相同，涉及三条线，没有办法解决它：

#example {
  border: 0 none #ccc;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
}

不幸的是，有必要重复#ccc属性中的border-bottom，因为如果省略则不会从级联中获取值;相反需要currentColor。有必要将border-radius指定为单独的属性，因为它不是border简写的一部分。