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

資訊專欄INFORMATION COLUMN

outline和他娘親border兩三事

DesGemini / 3623人閱讀

摘要：是啥顧英文名思義就是元素的輪廓，其實(shí)一般我們很少去設(shè)置元素的樣式，因此很多人對(duì)他不太了解。瀏覽器默認(rèn)給很多特定元素的某些行為加上了樣式，比如標(biāo)簽輸入框等。

outline是啥？

outline顧英文名思義就是元素的輪廓，其實(shí)一般我們很少去設(shè)置元素的outline樣式，因此很多人對(duì)他不太了解。瀏覽器默認(rèn)給很多特定元素的某些行為加上了outline樣式，比如a標(biāo)簽、input輸入框等。當(dāng)你用鍵盤tab鍵選中這些元素時(shí)候都會(huì)有一個(gè)外邊框方便鍵盤俠操作。我以前一度以為outline這種樣式只存在于表單元素等特定元素上...其實(shí)他對(duì)所有元素都適用的，只不過(guò)應(yīng)用場(chǎng)景大多在表單等元素上，而且從樣式的規(guī)則設(shè)置來(lái)看跟border如出一轍，簡(jiǎn)直是親兒子。

outline樣式表現(xiàn)

知道了啥是outline后，就直接從一個(gè)直觀的input框來(lái)觀察其具體屬性是怎么設(shè)置的。

這樣什么都不設(shè)置的輸入框觸發(fā)focus事件后在chrome瀏覽器下的默認(rèn)表現(xiàn)就是這樣的：

這個(gè)小藍(lán)框就是windows下chrome中默認(rèn)的表現(xiàn)，他默認(rèn)的樣式設(shè)置如下：

input:focus, textarea:focus, select:focus {
    outline-offset: -2px;
}
user agent stylesheet
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

首先我們來(lái)看outline-offset，他代表outline的偏移量，就是相對(duì)于border的偏移位置，要不說(shuō)他是border的親兒子呢，你偏移到天上也是以你麻麻為基準(zhǔn)的233。默認(rèn)是-2px所以我們就看到效果是遮住了border，那是不是把偏移設(shè)置為0就能看到輪廓像外擴(kuò)了？嘗試下，別說(shuō)0了設(shè)置為10px后仍然看不到任何效果還是原來(lái)的樣子，為什么呢？
那就要來(lái)看outline: -webkit-focus-ring-color auto 5px;，說(shuō)他是border親兒子，就體現(xiàn)在這里，跟border縮寫一樣，outline是outline-width outline-style outline-color的縮寫。
這個(gè)默認(rèn)樣式細(xì)心的朋友馬上就會(huì)注意到5px的輪廓根本沒(méi)有展示出來(lái)嘛，對(duì)的，問(wèn)題就在他前面的auto屬性值，也就是outline-style的屬性值，默認(rèn)是auto時(shí)候意味著輪廓的基本樣式都取決于瀏覽器了...其實(shí)也不用深究，根據(jù)我的測(cè)試如果outline-style樣式保持auto的話也就只能改改outline-color了，這個(gè)瀏覽器的決定的還是很多的，因此如果要自定義樣式，必須首先把這個(gè)outline-style改為其他，常用的也就是solid。

    outline-style: solid;
    outline-offset: 2px;

修改了上面兩個(gè)屬性后，樣式變?yōu)橄旅孢@個(gè)樣子：

可以看到5px的輪廓了！并且距離黑色的邊框有2px的距離。那很多人會(huì)問(wèn)既然這樣那要outline有什么用呢？border不能滿足需求么，這個(gè)問(wèn)題現(xiàn)在不能說(shuō)outline真得不可或缺，因?yàn)?b>box-shadow已經(jīng)可以達(dá)到同樣的效果，感興趣的朋友可以去了解下。但是只有border確實(shí)是不行的，下面我們引出了他們的異同，也就揭示了為什么要有outline。

outline和border的不同

主要差異就兩點(diǎn)

outline不占據(jù)空間，這個(gè)非常重要，因?yàn)?b>border可是盒模型的最外層的堅(jiān)定守護(hù)者，沒(méi)事亂動(dòng)是會(huì)影響頁(yè)面布局的，能不動(dòng)布局當(dāng)然不動(dòng)了，這個(gè)時(shí)候用outline來(lái)突出顯示樣式是最合適的。

outline沒(méi)有圓角，畢竟還是個(gè)孩子，沒(méi)有從麻麻那里學(xué)會(huì)border-radius，不過(guò)我覺(jué)得以后真得會(huì)加上的，會(huì)慢慢長(zhǎng)大的。（fire-fox已經(jīng)實(shí)現(xiàn)，我沒(méi)測(cè)試...這電腦沒(méi)裝）

如果要實(shí)現(xiàn)圓角可以用box-shadow參考張?chǎng)涡翊蟠蟛┛汀?/p> 參考

兩者差異

outline-style

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

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

相關(guān)文章

  • Vue 多系統(tǒng)切換實(shí)現(xiàn)方案(iframe嵌套的兩三事)

    摘要：總結(jié)來(lái)說(shuō)，低效，所以現(xiàn)在想將幾個(gè)系統(tǒng)融合到一個(gè)里邊，并且每次切換系統(tǒng)的時(shí)候保留用戶的操作。我是用開(kāi)發(fā)的，所以切換的地方直接用了的切換組件。 前言 公司分好幾個(gè)后臺(tái)模塊，統(tǒng)一使用vue+elementUi框架開(kāi)發(fā)，每一個(gè)后臺(tái)模塊都是單獨(dú)團(tuán)隊(duì)開(kāi)發(fā)的。并且?guī)讉€(gè)系統(tǒng)整體的風(fēng)格、布局一樣的，包括左側(cè)邊欄，上方的面包屑等用戶在使用的時(shí)候，可能要切換別的系統(tǒng)就要在瀏覽器里，新打開(kāi)窗口，再輸入網(wǎng)址，回...

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

  • border、outline、boxshadow那些事以及如何做內(nèi)凹圓

    摘要：線性漸變不過(guò)它稍稍有些復(fù)雜。在講解徑向漸變之前，我們先來(lái)看一看比較簡(jiǎn)單的線性漸變。再來(lái)看徑向漸變好的，接下來(lái)我們來(lái)看徑向漸變。但對(duì)徑向漸變來(lái)說(shuō)，顧名思議，所有色標(biāo)是排布在一條半徑上的。 border 邊框是我們美化網(wǎng)頁(yè)、增強(qiáng)樣式最常用的手段之一。例如： .text { width: 254px; height: 254px; background-co...

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

  • border、outline、boxshadow那些事以及如何做內(nèi)凹圓

    摘要：線性漸變不過(guò)它稍稍有些復(fù)雜。在講解徑向漸變之前，我們先來(lái)看一看比較簡(jiǎn)單的線性漸變。再來(lái)看徑向漸變好的，接下來(lái)我們來(lái)看徑向漸變。但對(duì)徑向漸變來(lái)說(shuō)，顧名思議，所有色標(biāo)是排布在一條半徑上的。 border 邊框是我們美化網(wǎng)頁(yè)、增強(qiáng)樣式最常用的手段之一。例如： .text { width: 254px; height: 254px; background-co...

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

  • rem兩三事

    摘要：昨天被問(wèn)到關(guān)于的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷懥藘赡?，基本沒(méi)怎么碰過(guò)，有點(diǎn)迷糊。缺點(diǎn)無(wú)縮放，且針對(duì)的屏沒(méi)有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。缺點(diǎn)需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用編輯器插件開(kāi)發(fā)時(shí)，單位計(jì)算復(fù)雜。 os：昨天被問(wèn)到關(guān)于rem的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷懥藘赡阩s，基本沒(méi)怎么碰過(guò)css，有點(diǎn)迷糊。 px、em、rem區(qū)別 不同于px這個(gè)固定單位，em和rem都是相對(duì)單...

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

  • PostgreSQL兩三事

    摘要：在沒(méi)有手動(dòng)配置的情況下，之類的事情，不得不交給做，而與賬戶之間的來(lái)回切換，也會(huì)浪費(fèi)寶貴的時(shí)間。作為秒數(shù)表示空閑時(shí)間間隔，當(dāng)一個(gè)連接持續(xù)該時(shí)間閑置，會(huì)發(fā)送包給客戶端，若連續(xù)個(gè)包都在秒內(nèi)沒(méi)有回應(yīng)，則會(huì)認(rèn)為這個(gè)已死。 不要用Graphic Installer 至少在Ubuntu下，覺(jué)得原生的apt-get管理方式更合適，PG的文件資源會(huì)被分配到應(yīng)該的地方，Linux的系統(tǒng)文件結(jié)構(gòu)也是種非常穩(wěn)...

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

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

0條評(píng)論

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