CSSの境界線の色はどのように透明ですか？

Question

私はCSSのスタイルを試していますが、このサンプルではボーダーがfiddleになっていますが、このコードでは透明は左右にのみ影響し、上下には影響しません。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.large { 
 
    font-size: 2em; 
 
} 
 
div { 
 
    width: 3.5em; 
 
    height: 5em; 
 
    border-style: solid; 
 
    border-width: 50px 20px; 
 
    border-color: red transparent; 
 
}

<div class="large"></div>

Answer 1

CSSの構文は次のようである：

境界：[上]、[右]、[下]、[左]。

in border-color：red transparent;あなたはトップを読むべきであり、右は透明でなければならず、他の2つの値は空であるため、彼ら自身をコピーすると述べました。

Answer 2

これは、border-colorのパラメータがあるためです。あなたが2つのパラメータを持っている場合、最初のものは上と下のためのもので、もう1つは左と右のものです。

あなたが4つのパラメータを持っている場合、それは次のようになります。 第一 - トップ 第二 - 右 第三 - 下 第四は、 - あなたのケースでは最初のものは赤であり、それは上部と下部と第二の影響

を残しました1つは透明で、左右に影響します。