Css 边框颜色'；透明性

我发现了一个很酷的例子，

边框颜色
透明
属性用于制作箭头。

我了解如何绘制边框，以及具有一侧设置边框的空元素如何帮助实现箭头效果，但在本例中，让我感到困惑的是透明的用法。

请看以下简单代码：

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

有了这段代码，我得到了一个向下的箭头。（）

只有一个透明的，我就得到了沙漏效果。（）：

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

希望这是有意义的。

谢谢你的帮助

谢谢；）
 你需要知道的是
边框颜色：红黑蓝
将使顶部边框变为红色，底部边框变为蓝色，左侧和右侧边框变为黑色，这解释了为什么在第一个示例中会出现箭头：


上色
其他一切都是透明的

它还解释了第二个示例：


上色和下色
左右透明

范例

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example":
#example p {
  border-color: red blue green;
  border-style: solid;
}


有关CSS三角形效果的详细说明，请参见：
有一个简单的规则，用于在此类速记符号中显示边的顺序：

麻烦：右上下左

如果参数少于4个，则缺少的参数将用以下规则填充（取决于存在或缺少的参数数量）：

在你的例子中

边框颜色：rgba（111111111,0.2）透明；

根据规定，我们有

top=rgba
右=透明
底部=透明
左=右=透明

在另一个示例中类似：

边框颜色：rgba（111111111,0.2）透明；

我们得到如下结果

top=rgba
右=透明
底部=顶部=rgba
左=右=透明
指边框样式。请查看您的

第一个示例

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

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

定义

 first rgba border= is a top border;
 second transparent border = are left & right border;
 third  transparent border= are bottom border;

 rgba border= are top & bottom border;
 transparent border = are left & right border;

检查这个例子

&

你的

第二个示例

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

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

定义

 first rgba border= is a top border;
 second transparent border = are left & right border;
 third  transparent border= are bottom border;

 rgba border= are top & bottom border;
 transparent border = are left & right border;

检查这个例子
我知道了，很明显。我认为，
rgba
指的是所有方面，然后用透明的方式选择你不想出现的方面。谢谢，伙计，谢谢大家！这是一个很好的答案，但如果我答对了，那么缺少的答案的推断顺序是：
right=top
，然后是
bottom=top
，然后是
left=right
。我想顺序很重要，所以也许应该编辑答案，对第一个代码段中的行重新排序。顺便说一句，其他代码段中的顺序是正确的。@EricWang该列表自始至终都在考虑中。因此，如果最后一个元素丢失了
left=right
，如果倒数第二个元素也丢失了
bottom=top
，等等。我不确定，如果另一个排序能让这更清楚。@Sirko我的意思是，在你做
left=right
之前，应该先检查
right=top
，因为如果
right
丢失了，这是第一件要做的事。因此，也许只需将
left=right-bottom=top-right=top
零件重新排序为
right=top-bottom=top-left=right