設(shè)置輪廓顏色

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

outline-color

值：| invert | inherit

初始值：invert（或用戶代理特定的值，見正文說明）

應(yīng)用于：所有元素

繼承性：無

計算值：根據(jù)指定確定

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

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

能夠?qū)ζ聊簧系南袼胤瓷@很有意思，特別是對輪廓的寬度沒有理論上的限制。所以，如果你愿意，完全可以使用輪廓對文檔中的很大一部分完成反色。

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

outline-color: red;

outline-color:#000;

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

這里可能存在一個缺點，輪廓顏色有可能與其周圍的像素顏色很接近，這種情況下用戶將無法看清。正因如此才定義了invert。

類似于輪廓樣式和寬度，對整個輪廓只能定義一種顏色。

匯總

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

outline

值：[||||]| inherit

初始值：對簡寫屬性未定義

應(yīng)用于：所有元素

繼承性：無

計算值：見各個屬性（outlinf color等等）

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

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

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

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

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

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

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

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

遺憾的是，CSS2有一些方面很含糊，其中包括它明確地拒絕定義兩個輪廓相互重疊時的行為，也沒有定義元素被其他元素部分模糊時對其輪廓會有怎樣的影響。這些問題可以用一個例子來說明：

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之后。它會與第一個div重疊，其背景將與第一個div輪廊的一部分重疊。這里沒有提供此代碼塊的示意圖，因為CSS2規(guī)范對于會發(fā)生什么情況沒有任何說明。是第一個div的輪廓可見，覆蓋第二個div的背景和內(nèi)容嗎？這兩個反色輪廊會在某些地方相交，那里會發(fā)生什么？像素會反色兩次嗎（相應(yīng)地最終恢復(fù)為其原來的狀態(tài)）？或者像素是不是只反色一次，然后不再改變？我們無從知道。這里無論怎么講都不能說對也不能說錯，而只是一種可能的結(jié)果，它不一定是用戶代理最終的實現(xiàn)，也不一定是CSS將來版本所定義的行為。

網(wǎng)站名稱：如何在網(wǎng)頁設(shè)計中設(shè)置輪廓顏色
轉(zhuǎn)載來源：http://www.rwnh.cn/news36/164936.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信小程序、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站改版、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)