прозрачное свойство border-color

Question

Я нашел этот классный пример border-color's 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 аргумента, недостающие заполнены следующие правила (в зависимости от того, сколько аргументов не хватает):

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 

в похожем другом примере:

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; сделает верхнюю границу красного, нижняя синяя, а левая и правая из них черные, и это объясняет, почему вы получаете стрелу в первом примере:

• Лучшие цвета
• все остальное прозрачный

Это также объясняет, 2-й пример:

• Топ & Дно цвета
• покинул & правый прозрачный

Пример

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

Это относится к стилю Border.Посмотрите на спецификации от 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/