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

  • 2019-06-11 14:58:42
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.supportcoffeeroasters.com

輪廓

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

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

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

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

一般認(rèn)為輪廊是用戶界面樣式的一部分,這是因?yàn)樗鼈冏钤?a href="http://m.supportcoffeeroasters.com" target="_self" title="云南網(wǎng)站建設(shè)">網(wǎng)站建設(shè)中常用于指示當(dāng)前焦點(diǎn)。如果一個(gè)用戶使用鍵盤(pán)導(dǎo)航從一個(gè)鏈接跳到另一個(gè)鏈接,那么當(dāng)前有焦點(diǎn)的鏈接往往會(huì)有一個(gè)輪廓。在Windows平臺(tái)的Internet Explorer中,輪廊應(yīng)用于用戶已選擇的任何鏈接(如果用戶使用鼠標(biāo),則是用鼠標(biāo)“點(diǎn)擊”的鏈接)。而且會(huì)一直留在那里,盡管有時(shí)并不希望如此。其他瀏覽器會(huì)向有鍵盤(pán)輸入焦點(diǎn)的文本輸入應(yīng)用輪廓,指示用戶鍵入時(shí)會(huì)從哪里開(kāi)始輸入。

可以看到,輪廓的樣式與邊框很類(lèi)似,不過(guò)除了前面所提到的,二者之間還有一些重要的差別。下面只是簡(jiǎn)略地介紹它們的相似性,更多的時(shí)間將用來(lái)討論二者的不同。

設(shè)置輪廓樣式

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

outline-style

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

初始值:none

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

繼承性:無(wú)

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

這組樣式關(guān)鍵字與邊框樣式關(guān)鍵字基本上相同,其視覺(jué)效果也是一樣的。只是少了一個(gè)關(guān)鍵字:hidden不是一個(gè)合法的輪廓樣式,用戶代理實(shí)際上要把它處理為nbne。這是有道理的,因?yàn)榧词馆喞梢?jiàn)也不會(huì)影響布局。

輪廓與邊框之間的另一個(gè)區(qū)別是,只能為一個(gè)outline-style值指定一個(gè)關(guān)鍵字(而邊框可以指定最多4個(gè)關(guān)鍵宇)。其實(shí)際效果是,一個(gè)元素周?chē)厝挥邢嗤妮喞獦邮?,而不論輪廓是否是矩形。這可能也是對(duì)的,因?yàn)閷?duì)于非矩形輪廓,要想確定如何應(yīng)用不同的樣式可能很困難。

輪廓寬度

一旦建立了輪廊并為之指定樣式,接下來(lái)可以用outline-width定義輪廓的寬度(這一點(diǎn)不難猜到),這是一個(gè)不錯(cuò)的想法。

outline-width

值:thin | medium | thick |<length>| inherit

初始值:medium

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

繼承性:無(wú)

計(jì)算值:絕對(duì)長(zhǎng)度丨如果輪廊的樣式是none或hidden,則為0

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

當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的輪廓

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3042.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)中的移動(dòng)光標(biāo)和圖形光標(biāo)

下一篇:如何在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)置輪廓顏色

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))