|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 本章給大家介紹css 輪廓(outline)屬性是如何使用的?輪廓(outline)屬性與邊框(border)屬性的區(qū)別(實(shí)例),讓大家可以了解css中的輪廓(outline)屬性的一些小知識(shí),以及輪廓(outline)和邊框(border)屬性之間的區(qū)別。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對你有所幫助。一、什么是css 輪廓(outline)屬性 輪廓(outline)是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用。 舉個(gè)例子來說吧:在我們平時(shí)閱讀瀏覽器里的內(nèi)容時(shí),當(dāng)鼠標(biāo)點(diǎn)擊讓一個(gè) a 標(biāo)簽鏈接或者一個(gè)input的單選框獲得焦點(diǎn)的時(shí)候,該元素將會(huì)被一個(gè)輪廓虛線框圍繞。這個(gè)輪廓虛線框就是輪廓(outline)。 在默認(rèn)情況下,點(diǎn)擊 a 標(biāo)簽,input,或者添加鼠標(biāo)點(diǎn)擊事件的時(shí)候,瀏覽器就會(huì)留下一個(gè)輪廓外框(chrome之下為藍(lán)色)。 然而這些默認(rèn)的輪廓外框,有時(shí)候很影響美觀,破壞了前端頁面的整體效果,我們并不是很想保留下來。那么如何把瀏覽器默認(rèn)的輪廓外框去掉,又或者改變這個(gè)默認(rèn)的輪廓外框效果? css的輪廓(outline)屬性讓我們可以改變這個(gè)默認(rèn)的輪廓虛線框效果。輪廓(outline)屬性有如下的相關(guān)屬性:
其中第1個(gè)相關(guān)屬性 outline 是速寫形式,格式為: outline: outline-color || outline-style || outline-width; 讓我們不用一個(gè)一個(gè)的設(shè)置輪廓的相關(guān)樣式,可以一次性完成設(shè)置。 我們用下面的例子來看看css的輪廓(outline)屬性的使用: 如果想讓鏈接獲取到焦點(diǎn)時(shí)更醒目,可以設(shè)置輪廓線條為紅色,可以如下: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪廓--outline</title>
<style>
.a { outline:5px solid red; }
</style>
</head>
<body>
<a href="#">我是默認(rèn)下的連接</a><br /><br />
<a href="#" class="a">我是一個(gè)測試連接,會(huì)紅</a>
</body>
</html>效果圖如下:
而如果只是單純的想去掉影響美觀的Tab上的輪廓線條,outline屬性可如下設(shè)置: .tab{ outline: none; ...... /* other properties */}從上面的例子可以看出輪廓(outline)與邊框(border)很相似,但輪廓(outline)和邊框(border)雖然相似卻也是不同的。 二、輪廓(outline)與邊框(border)的區(qū)別
以上就是css 輪廓(outline)屬性是如何使用的?輪廓屬性與邊框?qū)傩缘膮^(qū)別(實(shí)例)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!