边界颜色的透明属性

我发现了这个很酷的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指的是在这个简写属性。

希望是有道理的。
任何帮助表示赞赏。

感谢;）

来源

2012-02-03 daniel.tosaba

有在其两侧出现在这样的速记符号的顺序一个简单的规则：麻烦：右上左下

如果您有少于4个参数，缺少的那些充满了下列规则（取决于有多少参数丢失）：

left = right 
bottom = top 
right = top

所以在你的榜样

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

交流盘带规则，我们在其他的例子

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

similiar：

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

我们得到以下

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

来源

2012-02-03 07:35:03 Sirko

我知道了知道了，很明显。我认为'rgba'指的是所有的方面，然后透明，然后选择你希望的东西_不要在那里。谢谢你，谢谢大家！ – 2012-02-03 07:52:04

你需要知道的是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?

来源

2012-02-03 07:34:22

这指的是边框样式。再看看规格从w3c

来源

2012-02-03 07:42:51 HardCode

你

第一个例子

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/

来源

2012-02-03 07:44:51 sandeep

谁投弃权票请解释我 – sandeep 2012-02-03 07:49:57

边界颜色的透明属性

回答

相关问题