5

短縮できますか :

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;

NB：私はすでにこのように知っています：

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

1 に答える 1

11

いいえ、提供した例よりも短くすることはできません。

ドキュメントから

省略形の 'margin' および 'padding' プロパティとは異なり、'border' プロパティは 4 つの境界線に異なる値を設定できません。これを行うには、1 つ以上の他の境界線プロパティを使用する必要があります。

ありがとう@ロケット

プリプロセッサ (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; }
于 2012-06-12T17:02:05.283 に答える