CSS 边框颜色的透明属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9125113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-color's transparent property
提问by daniel.tosaba
I've found this cool example of border-color's transparentproperty usage to make an arrow.
I understand how borders are drawn and how an empty element with one side set border can help achieve arrow effect, but what makes me wander in this example is usage of transparent.
Take a look at this simple code:
我发现了这个很酷的示例，它使用border-color'stransparent属性来制作箭头。
我了解边框是如何绘制的，以及带有一侧设置边框的空元素如何帮助实现箭头效果，但让我在这个例子中徘徊的是透明的使用。
看看这个简单的代码：
<div id="daniel"></div>
CSS:
CSS：
#daniel{
border-color: rgba(111,111,111,0.2) transparent transparent;
border-style: solid;
border-width: 15px;
position: absolute;
}
With this code I get an arrow pointing down. (JSFIDDLE)
使用此代码，我得到一个向下的箭头。( JSFIDDLE)
With only one transparent I get an hourglasseffect. (JSFIDDLE):
只有一个透明的我得到了一个hourglass效果。（JSFIDDLE）：
border-color: rgba(111,111,111,0.2) transparent;
What confuses me is not knowing what border-{side}transparentrefers to in this shorthand properties.
让我困惑的是不知道border-{side}transparent在这个速记属性中指的是什么。
Hope that makes sense.
Any help appreciated.
希望这是有道理的。
任何帮助表示赞赏。
Thanks ;)
谢谢 ;）
回答by Sirko
there is a simple rule for the order in which the sides appear in such shorthand notations:
边出现在这种速记符号中的顺序有一个简单的规则：
TRouBLe: Top Right Bottom Left
问题：右上左下
if you have less than 4 arguments, the missing ones are filled with the following rules (depending on how many arguments are present or missing):
如果您的参数少于 4 个，则缺少的参数将填充以下规则（取决于存在或缺少的参数数量）：
3 values present: left = right
2 values present: left = right & bottom = top
1 value present: left = right = bottom = top
so in your example
所以在你的例子中
border-color: rgba(111,111,111,0.2) transparent transparent;
according to the rules, we have
根据规则，我们有
top = rgba
right = transparent
bottom = transparent
left = right = transparent
similar in the other example:
在另一个示例中类似：
border-color: rgba(111,111,111,0.2) transparent;
we get the following
我们得到以下
top = rgba
right = transparent
bottom = top = rgba
left = right = transparent
回答by Soufiane Hassou
What you need to know is border-color:red black blue;will make the top border red, the bottom one blue and the left and right ones black, and that explains why you get an arrow in your first example:
您需要知道的是border-color:red black blue;将顶部边框设为红色，底部边框设为蓝色，左侧和右侧边框设为黑色，这就解释了为什么在第一个示例中会出现箭头：
- Top colored
- everything else transparent
- 上色
- 其他一切都是透明的
It also explains the 2nd example:
它还解释了第二个示例：
- Top & bottom colored
- left & right transparent
- 顶部和底部颜色
- 左右透明
Example
例子
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;
}
For a details explanation of the CSS triangle effect, see: How does this CSS triangle shape work?
关于 CSS 三角形效果的详细解释，请参见：这个 CSS 三角形是如何工作的？
回答by sandeep
Your
您的
first example
第一个例子
border-color: rgba(111,111,111,0.2) transparent transparent;
Define
定义
first rgba border= is a top border;
second transparent border = are left & right border;
third transparent border= are bottom border;
check this example http://jsfiddle.net/hDpnw/8/
检查这个例子http://jsfiddle.net/hDpnw/8/
&
&
your
您的
second example
第二个例子
border-color: rgba(111,111,111,0.2) transparent;
Define
定义
rgba border= are top & bottom border;
transparent border = are left & right border;
check this example http://jsfiddle.net/hDpnw/7/
