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

Answer 2

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

顶色
其他一切透明

它还解释了第二个例子：

Top＆amp;底色
左＆amp;正确透明

实施例

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?

Answer 3

指的是边境风格。查看w3c

中的规范

Answer 4

您

第一个例子

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/

border-color的透明属性

4 个答案: