設置輪廓顏色

既然在網(wǎng)頁(yè)設計時(shí)可以設置樣式和寬度，可以想見(jiàn)，有一個(gè)outline-color屬性來(lái)指定輪廓的顏色。

outline-color

值：<color>| invert | inherit

初始值：invert（或用戶(hù)代理特定的值，見(jiàn)正文說(shuō)明）

應用于：所有元素

繼承性：無(wú)

計算值：根據指定確定

邊框與輪廓之間最有意思的差別就出現在這里：在網(wǎng)站建設時(shí)，輪廊顏色有關(guān)鍵字invert，而且這是默認值。反色輪廓意味著(zhù)要對輪廓所在的像素完成反色轉換。

invert導致對輪廓“后面”的像素完成反色轉換，這個(gè)過(guò)程可以確保不論輪廓后面是什么都將可見(jiàn)。如果一個(gè)用戶(hù)代理出于某種原因無(wú)法支持反色轉換，則會(huì )使用元素的color計算值。

能夠對屏幕上的像素反色，這很有意思，特別是對輪廓的寬度沒(méi)有理論上的限制。所以，如果你愿意，完全可以使用輪廓對文檔中的很大一部分完成反色。

當然，如果在設計網(wǎng)頁(yè)時(shí)想為輪廓定義一種特定的顏色，只需使用任何合法的顏色值。以下聲明的結果應該很顯然：

outline-color: red;

outline-color:#000;

outline-color: rgb(50%,50%,50%);

這里可能存在一個(gè)缺點(diǎn)，輪廓顏色有可能與其周?chē)南袼仡伾芙咏?，這種情況下用戶(hù)將無(wú)法看清。正因如此才定義了invert。

類(lèi)似于輪廓樣式和寬度，對整個(gè)輪廓只能定義一種顏色。

匯總

類(lèi)似于設置邊框樣式的border屬性，輪廓也有一個(gè)簡(jiǎn)寫(xiě)屬性outline，允許一次就完成輪廓樣式、寬度和顏色的設置。

outline

值：[<outline-color>||<outline-style>||<outline-width>]| inherit

初始值：對簡(jiǎn)寫(xiě)屬性未定義

應用于：所有元素

繼承性：無(wú)

計算值：見(jiàn)各個(gè)屬性（outlinf color等等）

與其他簡(jiǎn)寫(xiě)屬性類(lèi)似，outline把多個(gè)屬性匯總為一個(gè)簡(jiǎn)潔的記法。它與其他簡(jiǎn)寫(xiě)記法的行為相同，會(huì )覆蓋先前定義的值。因此，在以下例子中，輪廓會(huì )使用顏色關(guān)鍵字invert，因為這是第二個(gè)聲明指示的顏色（默認值）：

a:focus {outline-color: red; outline: thick solid;}

由于給定輪廓必須采用某種統一的樣式、寬度和顏色，所以outline是關(guān)于輪廓的唯一簡(jiǎn)寫(xiě)屬性。對于輪廊沒(méi)有諸如outline-top或outline-right之類(lèi)的屬性。

如果你想模擬一個(gè)反色邊框，可以先設置一個(gè)輪廓，為其寬度指定一個(gè)長(cháng)度值，然后設置該元素的外邊距等于或大于該寬度。

div#callbox {outline: 5px solid invert; margin: 5px;}

input:focus {Outline: 1em double gray;}

前面曾提到過(guò)，輪廊不會(huì )參與到文檔流中。因此即使因為焦點(diǎn)的改變使輪廓從一個(gè)鏈接移動(dòng)到另一個(gè)鏈接上，也不會(huì )導致文檔重新顯示。如果創(chuàng )作人員使用邊框指示焦點(diǎn)，文檔布局就會(huì )不停地變化和跳躍。在網(wǎng)頁(yè)設計時(shí)，輪廓可以得到與邊框同樣的效果，但不會(huì )導致跳躍。

之所以輪廊可以做到這一點(diǎn)，原因在于：根據定義，輪廓畫(huà)在元素框余下部分之上。由于CSS2中輪廓不會(huì )覆蓋其元素框的可見(jiàn)部分，而只可能覆蓋外邊距（透明外邊距），所以這不算大問(wèn)題。如果CSS的將來(lái)版本允許輪廓向里移，能覆蓋邊框或元素框的其他可見(jiàn)部分，輪廓的放置就會(huì )變得更重要。

遺憾的是，CSS2有一些方面很含糊，其中包括它明確地拒絕定義兩個(gè)輪廓相互重疊時(shí)的行為，也沒(méi)有定義元素被其他元素部分模糊時(shí)對其輪廓會(huì )有怎樣的影響。這些問(wèn)題可以用一個(gè)例子來(lái)說(shuō)明：

div#one {outline: 1em solid invert ;}

div#.two {outline: 1em solid invert; margin:-2em -2em 0 2em; background: white;}

現在假設在文檔中div#two就在divi#one之后。它會(huì )與第一個(gè)div重疊，其背景將與第一個(gè)div輪廊的一部分重疊。這里沒(méi)有提供此代碼塊的示意圖，因為CSS2規范對于會(huì )發(fā)生什么情況沒(méi)有任何說(shuō)明。是第一個(gè)div的輪廓可見(jiàn)，覆蓋第二個(gè)div的背景和內容嗎？這兩個(gè)反色輪廊會(huì )在某些地方相交，那里會(huì )發(fā)生什么？像素會(huì )反色兩次嗎（相應地最終恢復為其原來(lái)的狀態(tài)）？或者像素是不是只反色一次，然后不再改變？我們無(wú)從知道。這里無(wú)論怎么講都不能說(shuō)對也不能說(shuō)錯，而只是一種可能的結果，它不一定是用戶(hù)代理最終的實(shí)現，也不一定是CSS將來(lái)版本所定義的行為。