您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css中outline的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在css改變單選框顏色的方法實(shí)現(xiàn)中我們要模擬原生單選框通過Tab鍵獲得焦點(diǎn)的效果,這里涉及到一個(gè)常常被忽略的屬性——outline,由于之前對其印象確實(shí)有些模糊,于是本文打算對其進(jìn)行稍微深入的研究^_^
Spec是這樣描述它的
作用
用于創(chuàng)建可視對象的輪廓(元素的border-box),如表單按鈕輪廓等。
與border不同
1、outline不占文檔空間;
2、outline不一定是矩形。
具體屬性說明
/* 輪廓線顏色 * invert表示為顏色反轉(zhuǎn),即使輪廓在不同的背景顏色中都可見 */ outline-color: invert | <color_name> | <hex_number> | <rgb_number> | inherit /* 輪廓線樣式 */ outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit /* 輪廓線寬度 */ outline-width: medium | thin | thick | <length> | inherit /* 一次性設(shè)置輪廓線的顏色、樣式 和 寬度 */ outline: <outline-color> <outline-style> <outline-width>; /* 輪廓線的偏移量,大于0則輪廓擴(kuò)大,小于0則輪廓縮小 */ outline-offset: 0px;
魔鬼在細(xì)節(jié)
兼容性
?outline作為CSS2.1規(guī)范,因此IE6/7/8(Q)均不支持,在IE8下寫入正確的DOCTYPE則支持outline屬性。
?outline-offset則IE下均不支持。
IE6/7/8(Q)下隱藏outline
若要在IE6/7/8(Q)下隱藏outline效果,則在元素上添加hideFocus特性即可。
outline:0和outline:none的區(qū)別
在Chrome下執(zhí)行如下代碼
<style type="text/css"> .outline0{ outline: 0; } .outline-none{ outline: none; } </style> <a href="#" class="outline0">outline: 0</a> <a href="#" class="outline-none">outline: none</a> <script type="text/javascript"> const $ = document.querySelector.bind(document) const print = console.log.bind(console) const cssProps = ["outline-width", "outline-style", "outline-color"] const slctrs = [".outline0", ".outline-none"] slctrs.forEach(slctr => { styles = window.getComputedStyle($(slctr)) cssProps.forEach(cssProp => { print("%s, %s is %s", slctr, cssProp, styles[cssProp]) }) }) </script>
結(jié)果:
.outline0, outline-width is 0px .outline0, outline-style is none .outline0, outline-color is rgb(0, 0, 238) .outline-none, outline-width is 0px .outline-none, outline-style is none .outline-none, outline-color is rgb(0, 0, 238)
outline僅僅為設(shè)置單個(gè)或多個(gè)具體的outline屬性提供更便捷的API而已,因此outline:0和outline:none本質(zhì)上效果是一致的。
真心沒法弄出圓角
自從有了border-radius后,我們就可以通過CSS制作圓角矩形、圓形等圖形,甚至連box-shadow也受到border-radius影響從而實(shí)現(xiàn)元素陰影也能做到圓角的效果。那么outline是否也能做出圓角的效果呢?答案是否定的。那是因?yàn)閛utline的作用本來就是用于勾勒出元素所占的空間輪廓,通過border-radius雖然實(shí)現(xiàn)了圖形視覺上的圓角,但該元素所占位置空間一點(diǎn)都沒有變化,還是那個(gè)有棱有角的方形。
<style type="text/css"> .round{ width: 100px; height: 100px; background: yellow; border-radius: 50%; outline: solid 1px red; } </style>
輪廓的差異
在Chrome下outline僅限于標(biāo)識當(dāng)前元素自身所占的位置空間(border-box),但在FireFox下則包含子孫元素所占的位置空間。
<style type="text/css"> .outline{ width: 13px; height: 13px; outline: 1px solid red; } </style> <p class="outline"></p> <script type="text/javascript"> const el = document.querySelector(".outline") el.textContent = !!~navigator.appVersion.indexOf("Chrome") ? "Chrome" : "FireFox" </script>
關(guān)于“css中outline的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。