css – 边境物业的简写？

我们可以缩短：

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;

N.B：我已经这样知道了：

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

最佳答案

不,你不能比你提供的例子短.

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,但我几乎不相信这就是您想要的：

@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,3px,green,4px,blue,solid);
}

哪个输出：

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

原文地址：https://www.jb51.cc/css/427443.html