border-color的透明属性

Posted 2021-03-27

我发现了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在这个速记属性中指的是什么。

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

谢谢 ;）

答案

对于双方以这种速记符号出现的顺序，有一个简单的规则：

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

另一答案

您需要知道的是border-color:red black blue;将使顶部边框变为红色，底部为蓝色，左侧和右侧为黑色，这就解释了为什么在第一个示例中出现箭头：

• 顶部着色
• 其他一切都透明

它还解释了第二个例子：

• 顶部和底部颜色
• 左右透明

例

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;
}

Source

有关CSS三角效果的详细说明，请参阅：How does this CSS triangle shape work?

另一答案

这指的是边境风格。看看w3c的规格

另一答案

您的

第一个例子

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

限定

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

检查这个例子http://jsfiddle.net/hDpnw/8/

&

您的

第二个例子

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

限定

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

检查这个例子http://jsfiddle.net/hDpnw/7/