網(wǎng)頁設(shè)計中的輪廓

輪廓

CSS2還引入了用戶界面樣式中的最后一個主要方面：輪麻。輪廓有點類似于邊框，不過二者有兩個重要的區(qū)別。首先，輪廓不像邊框那樣參與到文檔流中，因此輪廓出現(xiàn)或消失時不會影響文檔流，即不會導(dǎo)致文檔的重新顯示，如果為一個元素指定了50像素的輪麻，這個輪廓很可能會覆蓋其他元素。其次，輪麻可能不是矩形，不過不要高興得太早，這并不是說可以創(chuàng)建圓形輪廓。相反，這意味著行內(nèi)元素的輪廓可能不同于該元素的邊框。利用輪廓，用戶代理可以“合并”部分輪廊，創(chuàng)建一個連續(xù)伹非矩形的形狀。圖13-10顯示了這樣一個例子。

用戶代理不一定需要支持非矩形輪廓。它們可能會像處理邊框一樣設(shè)置行內(nèi)非替換元素的輪廓格式，不過，兼容用戶代理必須確保輪廊不能占據(jù)布局空間。

輪廓和邊框之間還有一個根本的差異：它們不是同一個東西，所以在網(wǎng)頁設(shè)計時可以在同一個元素上共存。

CSS2規(guī)范指出：“輪廓可以畫在邊框邊界的外面?！弊⒁膺@句話里的推辭。只是建議用戶代理按這句話去做，不過這并不是必須恪守的要求。有些用戶代理可能決定把輪廓畫在內(nèi)邊框邊界內(nèi)，或者離邊框有一點距離的地方。在本文中，所有支持輪廓的瀏覽器都會把輪廊畫在外邊框邊界外面，所以謝天謝地這是一致的。

一般認(rèn)為輪廊是用戶界面樣式的一部分，這是因為它們最在網(wǎng)站建設(shè)中常用于指示當(dāng)前焦點。如果一個用戶使用鍵盤導(dǎo)航從一個鏈接跳到另一個鏈接，那么當(dāng)前有焦點的鏈接往往會有一個輪廓。在Windows平臺的Internet Explorer中，輪廊應(yīng)用于用戶已選擇的任何鏈接（如果用戶使用鼠標(biāo)，則是用鼠標(biāo)“點擊”的鏈接）。而且會一直留在那里，盡管有時并不希望如此。其他瀏覽器會向有鍵盤輸入焦點的文本輸入應(yīng)用輪廓，指示用戶鍵入時會從哪里開始輸入。

可以看到，輪廓的樣式與邊框很類似，不過除了前面所提到的，二者之間還有一些重要的差別。下面只是簡略地介紹它們的相似性，更多的時間將用來討論二者的不同。

設(shè)置輪廓樣式

類似于邊框，輪廊最基本的方面就是樣式，這要利用outline-style設(shè)置。

outline-style

值：none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

初始值：none

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

繼承性：無

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

這組樣式關(guān)鍵字與邊框樣式關(guān)鍵字基本上相同，其視覺效果也是一樣的。只是少了一個關(guān)鍵字：hidden不是一個合法的輪廓樣式，用戶代理實際上要把它處理為nbne。這是有道理的，因為即使輪廓可見也不會影響布局。

輪廓與邊框之間的另一個區(qū)別是，只能為一個outline-style值指定一個關(guān)鍵字（而邊框可以指定最多4個關(guān)鍵宇）。其實際效果是，一個元素周圍必然有相同的輪廓樣式，而不論輪廓是否是矩形。這可能也是對的，因為對于非矩形輪廓，要想確定如何應(yīng)用不同的樣式可能很困難。

輪廓寬度

一旦建立了輪廊并為之指定樣式，接下來可以用outline-width定義輪廓的寬度（這一點不難猜到），這是一個不錯的想法。

outline-width

值：thin | medium | thick || inherit

初始值：medium

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

繼承性：無

計算值：絕對長度丨如果輪廊的樣式是none或hidden，則為0

如果你在網(wǎng)頁設(shè)計時設(shè)置過邊框的寬度，對這個關(guān)鍵字列表應(yīng)該不陌生。outline-width與border-width之間唯一真正的區(qū)別是整個輪廓只能聲明一個寬度（類似于輪廓樣式）。因此，一個值中只允許有一個關(guān)鍵字。

文章名稱：網(wǎng)頁設(shè)計中的輪廓
文章轉(zhuǎn)載：http://bm7419.com/news/160456.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、ChatGPT、建站公司、App設(shè)計、網(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)