国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

outline和他娘親border兩三事

DesGemini / 3584人閱讀

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

outline是啥？

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

outline樣式表現(xiàn)

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

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

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

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

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

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

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

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

outline和border的不同

主要差異就兩點

outline不占據(jù)空間，這個非常重要，因為border可是盒模型的最外層的堅定守護者，沒事亂動是會影響頁面布局的，能不動布局當然不動了，這個時候用outline來突出顯示樣式是最合適的。

outline沒有圓角，畢竟還是個孩子，沒有從麻麻那里學會border-radius，不過我覺得以后真得會加上的，會慢慢長大的。（fire-fox已經(jīng)實現(xiàn)，我沒測試...這電腦沒裝）

如果要實現(xiàn)圓角可以用box-shadow參考張鑫旭大大博客。

參考

兩者差異

outline-style

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114156.html

相關(guān)文章

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

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

    cocopeak 評論0 收藏0

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

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

    CocoaChina 評論0 收藏0

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

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

    libin19890520 評論0 收藏0

  • rem兩三事

    摘要：昨天被問到關(guān)于的問題，當時一臉懵逼，因為寫了兩年，基本沒怎么碰過，有點迷糊。缺點無縮放，且針對的屏沒有做適配，導致對一些手機的適配不是很到位。缺點需要根據(jù)設(shè)計稿進行基準值換算，在不使用編輯器插件開發(fā)時，單位計算復雜。 os：昨天被問到關(guān)于rem的問題，當時一臉懵逼，因為寫了兩年js，基本沒怎么碰過css，有點迷糊。 px、em、rem區(qū)別 不同于px這個固定單位，em和rem都是相對單...

    Alliot 評論0 收藏0

  • PostgreSQL兩三事

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

    leeon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<