CSS魔法堂：那個被我們忽略的outline

Rocko 發(fā)布于2019-08-29 16:54 / 2857人閱讀

摘要：真心沒法弄出圓角自從有了后，我們就可以通過制作圓角矩形圓形等圖形，甚至連也受到影響從而實現(xiàn)元素陰影也能做到圓角的效果。那么是否也能做出圓角的效果呢答案是否定的。

前言

?在CSS魔法堂：改變單選框顏色就這么吹毛求疵！中我們要模擬原生單選框通過Tab鍵獲得焦點的效果，這里涉及到一個常常被忽略的屬性——outline，由于之前對其印象確實有些模糊，于是本文打算對其進行稍微深入的研究^_^

Spec是這樣描述它的 作用

?用于創(chuàng)建可視對象的輪廓(元素的border-box)，如表單按鈕輪廓等。

與border不同

outline不占文檔空間；

outline不一定是矩形。

具體屬性說明

/* 輪廓線顏色 
 * invert表示為顏色反轉，即使輪廓在不同的背景顏色中都可見 
 */
outline-color: invert |  |  |  | inherit
/* 輪廓線樣式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 輪廓線寬度 */
outline-width: medium | thin | thick |  | inherit
/* 一次性設置輪廓線的顏色、樣式 和 寬度 */
outline:   ;
/* 輪廓線的偏移量，大于0則輪廓擴大，小于0則輪廓縮小 */
outline-offset: 0px;

魔鬼在細節(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í)行如下代碼


outline: 0
outline: none

結果：

.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僅僅為設置單個或多個具體的outline屬性提供更便捷的API而已，因此outline:0和outline:none本質上效果是一致的。

真心沒法弄出圓角

?自從有了border-radius后，我們就可以通過CSS制作圓角矩形、圓形等圖形，甚至連box-shadow也受到border-radius影響從而實現(xiàn)元素陰影也能做到圓角的效果。那么outline是否也能做出圓角的效果呢？答案是否定的。那是因為outline的作用本來就是用于勾勒出元素所占的空間輪廓，通過border-radius雖然實現(xiàn)了圖形視覺上的圓角，但該元素所占位置空間一點都沒有變化，還是那個有棱有角的方形。

輪廓的差異

?在Chrome下outline僅限于標識當前元素自身所占的位置空間（border-box），但在FireFox下則包含子孫元素所占的位置空間。

總結

?尊重原創(chuàng)，轉載請注明來自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

參考

https://www.xuebuyuan.com/757...
https://www.zhangxinxu.com/wo...

GPU云服務器云服務器忽略css特性 php忽略警告的設置創(chuàng)造與魔法云鳥便宜的服務器創(chuàng)造與魔法所有服務器的云鳥在哪

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113972.html

CSS魔法堂：改變單選框顏色就這么吹毛求疵！

摘要：前言是否曾經(jīng)被業(yè)務提出能改改這個單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。設置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對外提供事件。前言 ?是否曾經(jīng)被業(yè)務提出能改改這個單選框的顏色吧！讓它和主題顏色搭配一下吧！，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。若拋開inpu...

freecode 2019-08-29 16:52 評論0 收藏0
CSS魔法堂：更豐富的前端動效by CSS Animation

摘要：無效生效重復怎么辦與規(guī)則一樣，標準規(guī)定相同的關鍵幀不產(chǎn)生層疊，僅最后出現(xiàn)的認定為有效。但實際上和均將關鍵幀設計為可層疊的。為默認值，表示動畫一結束，動畫效果就結束表示動畫一開始就馬上執(zhí)行完第一個關鍵幀的效果。前言 ?在《CSS魔法堂：Transition就這么好玩》中我們了解到對于簡單的補間動畫，我們可以通過transition實現(xiàn)。那到底多簡單的動畫適合用transtion來實現(xiàn)呢...

MrZONT 2019-08-30 15:54 評論0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格來分隔單詞的，而漢字間則無需空格分隔，但為了統(tǒng)一西文東亞和的排版，于是抽象出一個名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語言信息。前言每當來個需要既要水平排版又要設置固定高寬時，我就會想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發(fā)...

cucumber 2019-08-30 12:56 評論0 收藏0
CSS魔法堂：你一定誤解過的Normal flow

摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強武器就是個屬性了，好明顯它們默認值均是。前言 ?剛接觸CSS時經(jīng)常聽到看到一個詞文檔流，那到底什么是文檔流呢？然后會看到絕對定位和浮動定位能脫離文檔流，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolu...

Hancock_Xu 2019-08-30 12:56 評論0 收藏0
CSS魔法堂：小結一下Box Model與Positioning Scheme

摘要：魔法堂重新認識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細節(jié)后會發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。當采用時，屬性的實際值會被重置為。由于和則需要通過來引入來提供盒子定位微調的功能。前言 ?對于Box Model和Positioning Scheme中3種定位模式的細節(jié)，已經(jīng)通過以下幾篇文章記錄了我對其的理解和思考。?《CSS...

szysky 2019-08-30 12:57 評論0 收藏0