<output id="jbxdv"></output>

      1. 如何在網頁設計中設置輪廓顏色

        • 2019-06-12 16:34:57
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        設置輪廓顏色

        既然在網頁設計時可以設置樣式和寬度,可以想見,有一個outline-color屬性來指定輪廓的顏色。

        outline-color

        值:<color>| invert | inherit

        初始值:invert(或用戶代理特定的值,見正文說明)

        應用于:所有元素

        繼承性:無

        計算值:根據指定確定

        邊框與輪廓之間最有意思的差別就出現在這里:在網站建設時,輪廊顏色有關鍵字invert,而且這是默認值。反色輪廓意味著要對輪廓所在的像素完成反色轉換。

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

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

        當然,如果在設計網頁時想為輪廓定義一種特定的顏色,只需使用任何合法的顏色值。以下聲明的結果應該很顯然:

        outline-color: red;

        outline-color:#000;

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

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

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

        匯總

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

        outline

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

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

        應用于:所有元素

        繼承性:無

        計算值:見各個屬性(outlinf color等等)

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

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

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

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

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

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

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

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

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

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

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

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

        當前文章標題:如何在網頁設計中設置輪廓顏色

        當前URL:http://www.freenetsites.com/news/wzzz/3043.html

        上一篇:網頁設計中的輪廓

        下一篇:認識網頁和網站

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>