譯」22個(gè)必備的CSS小技巧

1、譯22個(gè)必備的css小技巧譯22個(gè)必備的css小技巧22個(gè)必備的css小技巧大家好，今日我們將會(huì)介紹一些十分有用的css小技巧，讓我們開(kāi)頭吧！譯22個(gè)必備的css小技巧不久之前firefox和safari掃瞄器已經(jīng)開(kāi)頭支持類(lèi)似photoshop的混合模式，但是在chrome和opera掃瞄器中需要添加前綴。舉個(gè)栗子：譯22個(gè)必備的css小技巧混合模式譯22個(gè)必備的css小技巧漸變邊框現(xiàn)在，你甚至可以在邊框中用法漸變。 要用法漸變邊框十分容易，只需要設(shè)置一個(gè)更低z-index的偽元素即可：譯22個(gè)必備的css小技巧漸變邊框詳細(xì)的例子可以看這里，或者看這里用法的是background-clip和b

2、ackground-origin屬性。在不久的未來(lái)，大概全部掃瞄器都將支持border-image屬性，終于的代碼會(huì)和下面一樣：譯22個(gè)必備的css小技巧border-image譯22個(gè)必備的css小技巧大概你不知道z-index同樣支持過(guò)渡！在過(guò)渡的每一步中，它的值都不發(fā)生轉(zhuǎn)變，所以你以為它不支持過(guò)渡——但其實(shí)它支持。譯22個(gè)必備的css小技巧z-index的過(guò)渡我們可以用法這個(gè)辦法來(lái)偵測(cè)當(dāng)前的色彩，以避開(kāi)常常地重復(fù)定義它。 這個(gè)辦法在用法svg圖標(biāo)的時(shí)候十分實(shí)用，由于它們的色彩由其父元素打算。通常我們是這么做的：譯22個(gè)必備的css小技巧svg色彩但

3、我們可以用法currentcolor這么做：譯22個(gè)必備的css小技巧currentcolor附上其它帶有偽元素的例子：譯22個(gè)必備的css小技巧偽元素你是否還記得為了解決一些問(wèn)題而給一幅背景圖設(shè)置background-size屬性的時(shí)刻呢？現(xiàn)在你可以用法object-fit屬性啦，webkit掃瞄器都支持它，firefox也將在近期予以支持。譯22個(gè)必備的css小技巧object fit譯22個(gè)必備的css小技巧示例讓我們一起不用法來(lái)設(shè)置復(fù)選框的樣式：譯22個(gè)必備的css小技巧單選框和復(fù)選框的樣式譯22個(gè)必備的css小技巧單選框和復(fù)選框的樣式正如你所看見(jiàn)的，我們躲藏了原有的復(fù)選框，改為用法偽

4、元素和偽類(lèi):checked（ie9+）來(lái)表現(xiàn)它。當(dāng)它被選中時(shí)，一個(gè)設(shè)置在content里的unicode編碼的字符將會(huì)顯示出來(lái)。值得注重的是，unicode編碼在css和html中的寫(xiě)法是不一樣的。在css中它是一個(gè)以反斜杠為開(kāi)頭的十六進(jìn)制數(shù)，而在html中它是十進(jìn)制的，比如。 接著為我們的復(fù)選框添加一些動(dòng)畫(huà)效果：譯22個(gè)必備的css小技巧單選框和復(fù)選框的樣式譯22個(gè)必備的css小技巧總所周知css中是可以用法計(jì)數(shù)器的：譯22個(gè)必備的css小技巧css中的計(jì)數(shù)器譯22個(gè)必備的css小技巧css中的計(jì)數(shù)器我們定義了一個(gè)id在counter-reset屬性中作為初始值（默認(rèn)為0）。你可以設(shè)置另一個(gè)

5、值在counter-increment屬性中作為每一步的遞增值。你可以計(jì)算出有多少個(gè)復(fù)選框被用戶勾選了：譯22個(gè)必備的css小技巧高級(jí)css計(jì)數(shù)器譯22個(gè)必備的css小技巧高級(jí)css計(jì)數(shù)器你也可以制作一個(gè)容易的計(jì)算器：譯22個(gè)必備的css小技巧容易的計(jì)算器譯22個(gè)必備的css小技巧容易的計(jì)算器它同樣得以運(yùn)行，請(qǐng)看詳細(xì)的demo和文章。你記得你有多么常常被迫需要一個(gè)漢堡圖標(biāo)嗎？譯22個(gè)必備的css小技巧漢堡圖標(biāo)這里有起碼3個(gè)方式去實(shí)現(xiàn)它：1、 shadows譯22個(gè)必備的css小技巧shadows2、 gradient譯22個(gè)必備的css小技巧gradient3、 utf-8 你可以挺直用法標(biāo)準(zhǔn)

6、符號(hào)： (unicode: u+2630, html: )。你也可以像其他元素那樣靈便設(shè)置它的色彩或大小。看例子。 你也可以用法svg，字體圖標(biāo)，或者通過(guò)偽元素設(shè)置的border邊框。這是一個(gè)新的叫做supports的css表達(dá)式。顧名思義，它可以檢測(cè)某些設(shè)定是否被掃瞄器所支持，并非全部的掃瞄器都支持它，但是你仍然可以用法它作為基本的檢測(cè)手段：譯22個(gè)必備的css小技巧supports依你估量，把一個(gè)設(shè)置為visibility: visible的元素放在一個(gè)設(shè)置為visibility: hidden的元素里面，會(huì)發(fā)生什么？譯22個(gè)必備的css小技巧visibility: visible你可能會(huì)

7、認(rèn)為兩個(gè)元素都不顯示——然而實(shí)際上囫圇父元素都被躲藏了，而子元素不會(huì)。譯22個(gè)必備的css小技巧position: sticky我們發(fā)覺(jué)了一個(gè)新的特性，你可以新建一個(gè)sticky屬性的元素。它的運(yùn)行效果和fixed相同，但不會(huì)攔住任何元素。你最好看看例子 惟獨(dú)mozilla和safari掃瞄器支持這一屬性，但你也可以像下面那樣用法它：譯22個(gè)必備的css小技巧position: sticky我們將會(huì)在支持的掃瞄器中得到一個(gè)sticky屬性的元素，而在不支持的掃瞄器中它將會(huì)是一個(gè)一般的元素。這在你需要建立一個(gè)不行替代的，可以移動(dòng)的元素的移動(dòng)端頁(yè)面的時(shí)候十分

8、有用。不久之前，一些新的用以描述不同元素大小的尺寸單位問(wèn)世了，它們是：好玩的是，幾乎全部的現(xiàn)代掃瞄器都能很好地支持它們，所以你可以放心地用法。 為什么我們需要這些新的單位？由于它們可以讓不同的尺寸更簡(jiǎn)單被定義，你不要為父元素指定任何的百分比或者別的什么，請(qǐng)看例子：譯22個(gè)必備的css小技巧vh或者你可以設(shè)置一個(gè)美麗的彈出框在屏幕中間：譯22個(gè)必備的css小技巧vh這看起來(lái)酷斃了，看看在codepen的例子吧 但是目前仍然有一些關(guān)于這些新單位的不足之處：我們可以通過(guò)幾行代碼修改文字被選中時(shí)的效果：譯22個(gè)必備的css小技巧文字修飾你不僅可以定義文字被選中時(shí)的色彩，還能定義陰影或者背景色彩。假如你

9、需要在觸摸屏當(dāng)中為一些元素設(shè)置內(nèi)滾動(dòng)，那么你不僅需要overflow: scroll / auto，還需要-webkit-overflow-scrolling: touch; 事實(shí)上，移動(dòng)端掃瞄器在某些時(shí)候并不能正確執(zhí)行overflow: scroll / auto，它可能會(huì)滾動(dòng)囫圇頁(yè)面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個(gè)問(wèn)題，你可以在你的實(shí)際項(xiàng)目中體驗(yàn)一下。有時(shí)候動(dòng)畫(huà)可能會(huì)導(dǎo)致用戶的電腦卡頓，你可以在特定元素中用法硬件加速來(lái)避開(kāi)這個(gè)問(wèn)題：譯22個(gè)必備的css小技巧3d硬件加速你并不會(huì)察覺(jué)有什么不同，但掃瞄器會(huì)為這個(gè)元素舉行3d硬件加速，在wil

10、l-change這個(gè)特別屬性未被全面支持之前，這個(gè)辦法還是很實(shí)用的。你可以用unicode符號(hào)命名class：譯22個(gè)必備的css小技巧用unicode符號(hào)命名class但這其實(shí)是用來(lái)搞笑的，千萬(wàn)不要在大型項(xiàng)目中用法，由于不是全部的電腦都支持unicode符號(hào)。事實(shí)上垂直方向的羅列計(jì)算是基于父元素的寬度而不是高度。定義兩個(gè)元素：譯22個(gè)必備的css小技巧垂直方向的百分比邊距理論上，子元素的高會(huì)是父元素高的一半，但是看看我們實(shí)際得到的狀況：譯22個(gè)必備的css小技巧垂直方向的百分比邊距記住，子元素的百分比是相對(duì)于父元素的寬度。firefox用它自己的方式去計(jì)算按鈕的邊距。這聽(tīng)起來(lái)有點(diǎn)驚奇，但它會(huì)自動(dòng)地添加一些邊距進(jìn)去：譯22個(gè)必備的css小技巧可以用以下辦法來(lái)修復(fù)這個(gè)問(wèn)題：譯22個(gè)必備的css小技巧修復(fù)火狐掃瞄器的按鈕邊距很少人知道，定義了一個(gè)元素的文字色彩，意味