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

資訊專欄INFORMATION COLUMN

## CSS 的黑科技

wh469012917 / 3389人閱讀

摘要：所以在使用屬性選擇器的時(shí)候，注意大小寫(xiě)問(wèn)題。目前就只覺(jué)得這些黑科技需要提醒自己一下，有可以補(bǔ)充。

  
原文來(lái)自：https://jellybool.com/post/css-that-you-may-not-know


  
補(bǔ)充篇在這里 http://segmentfault.com/a/1190000003029085

昨天由于某些原因沒(méi)有寫(xiě)博客，之前說(shuō)好的每天一篇的，這篇是為了補(bǔ)昨天的了。然后我就要當(dāng)一次標(biāo)題黨了。這里的黑科技其實(shí)就是一些CSS中不怎么為人所知但在解決某些問(wèn)題的時(shí)候很溜的屬性。

border-radius

很多開(kāi)發(fā)者估計(jì)都沒(méi)有正確認(rèn)識(shí)這個(gè)border-radius，因?yàn)榛旧虾芏嗳硕际沁@么用的：

.box {
  border-radius: 4px;
}

稍微高端一點(diǎn)的是這樣的：

.box {
  border-radius: 4px 6px 6px 4px;
}

然而，終極黑科技是這樣用的：

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

對(duì)，它可以賦8個(gè)值，沒(méi)見(jiàn)過(guò)？不著急，具體的解釋是這樣的：

斜線前面的影響的是水平方向，斜線后面影響的是垂直方向，各個(gè)數(shù)字就分別代表四個(gè)不一樣的方向。
outline-offset

相信很多開(kāi)發(fā)者在寫(xiě)CSS的時(shí)候?qū)ο旅娴恼Z(yǔ)句會(huì)很熟悉：

input {
    outline : none;
}

input:focus {
    outline : none;
}

這就是將input輸入框去掉默認(rèn)的藍(lán)線框的方法。其實(shí)，這里還有說(shuō)一個(gè)就是，CSS中還有一個(gè)outline-offset屬性，在這個(gè)屬性中，你可以設(shè)置默認(rèn)線框的距離；像這樣

input {
    outline-offset: 4px ;
}

調(diào)節(jié)該屬性值的大小你就可以看到outline的距離變化了。

類的聲明

對(duì)于下面的類的聲明，可能大家都很熟悉：

.col-8 {

}

這當(dāng)然沒(méi)什么，但是如果你這樣寫(xiě)呢：

.? {
  color: hotpink;
}

.★ {
  color: yellow;
}

嗯，看起來(lái)怎么樣，你是可以這么用的：

只要是Unicode的，你都可以這么來(lái)聲明你的類。

選中連續(xù)的幾個(gè)元素

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

上面的這種寫(xiě)法其實(shí)就可以達(dá)到選中ol下面的第七到第十四個(gè)li元素。

偽類設(shè)置單標(biāo)簽

html中有幾個(gè)常見(jiàn)的單標(biāo)簽：
 ,

等。具體可以查看這里：

http://www.w3.org/TR/html5/syntax.html#void-elements

下面的示例是實(shí)現(xiàn)對(duì)

的修飾。

hr:before {
    content: "??";
}

hr:after {
    content: " This is an 




 element";
}

沒(méi)錯(cuò)，關(guān)鍵就是使用:before和:after這兩個(gè)偽類。在這里，順便說(shuō)一點(diǎn)就是，其實(shí)你還可以用這兩個(gè)偽類來(lái)修飾 和 ，不過(guò)這個(gè)前提是，你把這兩個(gè)的display屬性設(shè)置為：

display: block
屬性區(qū)分大小寫(xiě)

假如我們?cè)趯?xiě)html的時(shí)候有類似下面的代碼：

然后我們用屬性選擇器進(jìn)行CSS修飾：

div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

這樣的聲明方式毫無(wú)疑問(wèn)地就會(huì)生效。然而，如果我們聲明成下面這個(gè)樣子，結(jié)果會(huì)是怎么樣的呢：

div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

這變成了大寫(xiě)之后，第一個(gè)class="BOX"并不會(huì)影響到

,而第二個(gè)type="EMAIL"還是會(huì)正常修飾。所以在使用屬性選擇器的時(shí)候，注意大小寫(xiě)問(wèn)題。

目前就只覺(jué)得這些CSS黑科技需要提醒自己一下，有可以補(bǔ)充。

Happy Hacking

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

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

相關(guān)文章

  • Vue中你不知道但卻很實(shí)用的黑科技

    摘要：最近數(shù)月一直投身于的開(kāi)源工作中，完成了大大小小多個(gè)組件，在組件化開(kāi)發(fā)中積累了不少經(jīng)驗(yàn)。在開(kāi)發(fā)全局提示組件通知提醒組件對(duì)話框組件時(shí)，內(nèi)部都是使用來(lái)渲染，但卻是來(lái)隱式地創(chuàng)建這些實(shí)例，這樣我們就可以像標(biāo)題這樣使用，但其內(nèi)部還是通過(guò)來(lái)管理。 最近數(shù)月一直投身于 iView 的開(kāi)源工作中，完成了大大小小 30 多個(gè) UI 組件，在 Vue 組件化開(kāi)發(fā)中積累了不少經(jīng)驗(yàn)。其中也有很多帶有技巧性和黑科...

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

  • Vue中你不知道但卻很實(shí)用的黑科技

    摘要：最近數(shù)月一直投身于的開(kāi)源工作中，完成了大大小小多個(gè)組件，在組件化開(kāi)發(fā)中積累了不少經(jīng)驗(yàn)。在開(kāi)發(fā)全局提示組件通知提醒組件對(duì)話框組件時(shí)，內(nèi)部都是使用來(lái)渲染，但卻是來(lái)隱式地創(chuàng)建這些實(shí)例，這樣我們就可以像標(biāo)題這樣使用，但其內(nèi)部還是通過(guò)來(lái)管理。 最近數(shù)月一直投身于 iView 的開(kāi)源工作中，完成了大大小小 30 多個(gè) UI 組件，在 Vue 組件化開(kāi)發(fā)中積累了不少經(jīng)驗(yàn)。其中也有很多帶有技巧性和黑科...

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

  • CSS3實(shí)現(xiàn)全景圖特效

    摘要：本篇文章將給大家?guī)?lái)一個(gè)的黑科技如何僅僅使用來(lái)實(shí)現(xiàn)全景圖的效果最終效果演示頁(yè)面布局基礎(chǔ)樣式首先定義一些基本的樣式和動(dòng)畫(huà)這段代碼的意思是讓圖片的高等于容器的高，并且水平方向自動(dòng)，即圖片最左邊貼著容器左側(cè)。 本篇文章將給大家?guī)?lái)一個(gè)css3的黑科技：如何僅僅使用css來(lái)實(shí)現(xiàn)全景圖的效果？ 最終效果演示：demo 頁(yè)面布局 基礎(chǔ)樣式 首先定義一些基本的樣式和動(dòng)畫(huà) .panorama { ...

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

  • 前端優(yōu)化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點(diǎn)長(zhǎng)，我想先聊一聊閱讀的方式，我希望你閱讀的時(shí)候，能夠把我當(dāng)作你的競(jìng)爭(zhēng)對(duì)手，你的夢(mèng)想是超越我。 如何提升頁(yè)面渲染效率 - 前端 - 掘金Web頁(yè)面的性能 我們每天都會(huì)瀏覽很多的Web頁(yè)面，使用很多基于Web的應(yīng)用。這些站點(diǎn)看起來(lái)既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

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

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

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

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

0條評(píng)論

wh469012917

男|高級(jí)講師

TA的文章

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