邊界顏色的透明屬性

我發現了這個很酷的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

邊界顏色的透明屬性

回答

相關問題