既然在網(wǎng)頁(yè)設(shè)計(jì)時(shí)可以設(shè)置樣式和寬度,可以想見,有一個(gè)outline-color屬性來(lái)指定輪廓的顏色。
outline-color
值:<color>| invert | inherit
初始值:invert(或用戶代理特定的值,見正文說(shuō)明)
應(yīng)用于:所有元素
繼承性:無(wú)
計(jì)算值:根據(jù)指定確定
邊框與輪廓之間最有意思的差別就出現(xiàn)在這里:在網(wǎng)站建設(shè)時(shí),輪廊顏色有關(guān)鍵字invert,而且這是默認(rèn)值。反色輪廓意味著要對(duì)輪廓所在的像素完成反色轉(zhuǎn)換。
invert導(dǎo)致對(duì)輪廓“后面”的像素完成反色轉(zhuǎn)換,這個(gè)過(guò)程可以確保不論輪廓后面是什么都將可見。如果一個(gè)用戶代理出于某種原因無(wú)法支持反色轉(zhuǎn)換,則會(huì)使用元素的color計(jì)算值。
能夠?qū)ζ聊簧系南袼胤瓷@很有意思,特別是對(duì)輪廓的寬度沒(méi)有理論上的限制。所以,如果你愿意,完全可以使用輪廓對(duì)文檔中的很大一部分完成反色。
當(dāng)然,如果在設(shè)計(jì)網(wǎng)頁(yè)時(shí)想為輪廓定義一種特定的顏色,只需使用任何合法的顏色值。以下聲明的結(jié)果應(yīng)該很顯然:
outline-color: red;
outline-color:#000;
outline-color: rgb(50%,50%,50%);
這里可能存在一個(gè)缺點(diǎn),輪廓顏色有可能與其周圍的像素顏色很接近,這種情況下用戶將無(wú)法看清。正因如此才定義了invert。
類似于輪廓樣式和寬度,對(duì)整個(gè)輪廓只能定義一種顏色。
類似于設(shè)置邊框樣式的border屬性,輪廓也有一個(gè)簡(jiǎn)寫屬性outline,允許一次就完成輪廓樣式、寬度和顏色的設(shè)置。
outline
值:[<outline-color>||<outline-style>||<outline-width>]| inherit
初始值:對(duì)簡(jiǎn)寫屬性未定義
應(yīng)用于:所有元素
繼承性:無(wú)
計(jì)算值:見各個(gè)屬性(outlinf color等等)
與其他簡(jiǎn)寫屬性類似,outline把多個(gè)屬性匯總為一個(gè)簡(jiǎn)潔的記法。它與其他簡(jiǎn)寫記法的行為相同,會(huì)覆蓋先前定義的值。因此,在以下例子中,輪廓會(huì)使用顏色關(guān)鍵字invert,因?yàn)檫@是第二個(gè)聲明指示的顏色(默認(rèn)值):
a:focus {outline-color: red; outline: thick solid;}
由于給定輪廓必須采用某種統(tǒng)一的樣式、寬度和顏色,所以outline是關(guān)于輪廓的唯一簡(jiǎn)寫屬性。對(duì)于輪廊沒(méi)有諸如outline-top或outline-right之類的屬性。
如果你想模擬一個(gè)反色邊框,可以先設(shè)置一個(gè)輪廓,為其寬度指定一個(gè)長(zhǎng)度值,然后設(shè)置該元素的外邊距等于或大于該寬度。
div#callbox {outline: 5px solid invert; margin: 5px;}
input:focus {Outline: 1em double gray;}
前面曾提到過(guò),輪廊不會(huì)參與到文檔流中。因此即使因?yàn)榻裹c(diǎn)的改變使輪廓從一個(gè)鏈接移動(dòng)到另一個(gè)鏈接上,也不會(huì)導(dǎo)致文檔重新顯示。如果創(chuàng)作人員使用邊框指示焦點(diǎn),文檔布局就會(huì)不停地變化和跳躍。在網(wǎng)頁(yè)設(shè)計(jì)時(shí),輪廓可以得到與邊框同樣的效果,但不會(huì)導(dǎo)致跳躍。
之所以輪廊可以做到這一點(diǎn),原因在于:根據(jù)定義,輪廓畫在元素框余下部分之上。由于CSS2中輪廓不會(huì)覆蓋其元素框的可見部分,而只可能覆蓋外邊距(透明外邊距),所以這不算大問(wèn)題。如果CSS的將來(lái)版本允許輪廓向里移,能覆蓋邊框或元素框的其他可見部分,輪廓的放置就會(huì)變得更重要。
遺憾的是,CSS2有一些方面很含糊,其中包括它明確地拒絕定義兩個(gè)輪廓相互重疊時(shí)的行為,也沒(méi)有定義元素被其他元素部分模糊時(shí)對(duì)其輪廓會(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;}
現(xiàn)在假設(shè)在文檔中div#two就在divi#one之后。它會(huì)與第一個(gè)div重疊,其背景將與第一個(gè)div輪廊的一部分重疊。這里沒(méi)有提供此代碼塊的示意圖,因?yàn)镃SS2規(guī)范對(duì)于會(huì)發(fā)生什么情況沒(méi)有任何說(shuō)明。是第一個(gè)div的輪廓可見,覆蓋第二個(gè)div的背景和內(nèi)容嗎?這兩個(gè)反色輪廊會(huì)在某些地方相交,那里會(huì)發(fā)生什么?像素會(huì)反色兩次嗎(相應(yīng)地最終恢復(fù)為其原來(lái)的狀態(tài))?或者像素是不是只反色一次,然后不再改變?我們無(wú)從知道。這里無(wú)論怎么講都不能說(shuō)對(duì)也不能說(shuō)錯(cuò),而只是一種可能的結(jié)果,它不一定是用戶代理最終的實(shí)現(xiàn),也不一定是CSS將來(lái)版本所定義的行為。