成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS魔法堂：那個(gè)被我們忽略的outline

Rocko / 2887人閱讀

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

前言

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

Spec是這樣描述它的 作用

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

與border不同

outline不占文檔空間；

outline不一定是矩形。

具體屬性說(shuō)明 
/* 輪廓線顏色 
 * invert表示為顏色反轉(zhuǎn)，即使輪廓在不同的背景顏色中都可見(jiàn) 
 */
outline-color: invert |  |  |  | inherit
/* 輪廓線樣式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 輪廓線寬度 */
outline-width: medium | thin | thick |  | inherit
/* 一次性設(shè)置輪廓線的顏色、樣式 和 寬度 */
outline:   ;
/* 輪廓線的偏移量，大于0則輪廓擴(kuò)大，小于0則輪廓縮小 */
outline-offset: 0px;
魔鬼在細(xì)節(jié) 兼容性

?outline作為CSS2.1規(guī)范，因此IE6/7/8(Q)均不支持，在IE8下寫(xiě)入正確的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

結(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ì)上效果是一致的。

真心沒(méi)法弄出圓角

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

輪廓的差異

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

總結(jié)

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

參考

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113972.html

相關(guān)文章

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

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

    freecode 評(píng)論0 收藏0

  • CSS魔法堂：更豐富的前端動(dòng)效by CSS Animation

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

    MrZONT 評(píng)論0 收藏0

  • CSS魔法堂："那不是bug，是你不懂我!" by inline-block

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

    cucumber 評(píng)論0 收藏0

  • CSS魔法堂：你一定誤解過(guò)的Normal flow

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

    Hancock_Xu 評(píng)論0 收藏0

  • CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

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

    szysky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<