css - 边框属性的简写？

Question

我们可以缩短吗:

border-top:1px solid black;
border-left:2px solid red;
border-bottom:3px solid green;
border-right:4px solid blue;

类似于:

border:1px solid black 2px solid red 3px solid green 4px solid blue;

注意:我已经这样知道了:

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

Answer 1

不，你不能让它比你提供的例子更短。

From the docs

Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’ property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

_{感谢@Rocket}

---

如果您正在使用预处理器(如 SCSS)，您可以尝试使用混入，但我几乎不相信这就是您想要的:

@mixin border_shorthand(
$top_width, $top_color, $top_style,
$left_width, $left_color, $left_style,
$bottom_width, $bottom_color, $bottom_style,
$right_width, $right_color, $right_style) {
  border-top: $top_width $top_color $top_style;
  border-left: $left_width $left_color $left_style;
  border-bottom: $bottom_width $bottom_color $bottom_style;
  border-right: $right_width $right_color $right_style;
}

.element {
  @include border_shorthand(1px, black, solid, 2px, red, solid, 3px, green, solid, 4px, blue, solid);
}

哪些输出:

.element {
  border-top: 1px black solid;
  border-left: 2px red solid;
  border-bottom: 3px green solid;
  border-right: 4px blue solid; }