边框颜色在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

这是因为你有border-color的参数。当你有2个参数时......第一个用于TOP和BOTTOM，第二个用于LEFT和RIGHT。

如果您有4个参数，它将是： 第1名 - 顶级 第二 - 右 第3 - 底部 第4天 - 左边

在你的情况下，第一个是红色，它影响顶部和底部，第二个是透明的，它影响左右。

Answer 2

css的语法是这样的：

border：[top]，[right]，[bottom]，[left];

边框颜色

：红色透明;你说top应该被读取，right应该是透明的，并且因为其他2个值是空的，所以它们自己复制。