border-color的透明属性

Question

我找到了这个很好border-color的transparent财产用法例子来制作一个箭头.
我理解边框的绘制方式以及带有一侧边框的空元素如何帮助实现箭头效果,但是在这个例子中让我徘徊的是使用透明.
看看这个简单的代码:

<div id="daniel"></div>

CSS:

#daniel{
 border-color: rgba(111,111,111,0.2) transparent transparent;
 border-style: solid;
 border-width: 15px;
 position: absolute;
}

使用此代码,我得到一个指向下方的箭头.(JSFIDDLE)

只有一个透明我得到一个hourglass效果.(JSFIDDLE):

border-color: rgba(111,111,111,0.2) transparent;

令我困惑的是不知道border-{side} transparent这个速记属性中指的是什么.

希望有道理.
任何帮助赞赏.

谢谢 ;)

Answer 1

对于双边以这种简写符号出现的顺序有一个简单的规则:TRouBLe:右上角左下角

如果您的参数少于4个,则缺少的参数将填充以下规则(取决于缺少多少参数):

3 values present: left = right
2 values present: left = right & bottom = top
1 value present:  left = right = bottom = top

所以在你的例子中

border-color: rgba(111,111,111,0.2) transparent transparent;

根据规则,我们有

top = rgba
right = transparent
bottom = transparent
left = right = transparent

在另一个例子中类似:

border-color: rgba(111,111,111,0.2) transparent;

我们得到以下内容

top = rgba 
right = transparent
bottom = top = rgba
left = right = transparent