必備的CSS小技巧有哪些

這篇文章主要介紹了必備的CSS小技巧有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇必備的CSS小技巧有哪些文章都會有所收獲，下面我們一起來看看吧。

不久之前Firefox和Safari瀏覽器已經開始支持類似Photoshop的混合模式，但是在Chrome和Opera瀏覽器中需要添加前綴。舉個栗子：

混合模式

漸變邊框

現在，你甚至可以在邊框中使用漸變。 要使用漸變邊框非常簡單，只需要設置一個更低z-index的偽元素即可：

漸變邊框

具體的例子可以看這里，或者看這里使用的是background-clip和background-origin屬性。在不久的將來，也許所有瀏覽器都將支持border-image屬性，最終的代碼會和下面一樣：

border-image

也許你不知道z-index同樣支持過渡！在過渡的每一步中，它的值都不發生改變，所以你以為它不支持過渡——但其實它支持。

z-index的過渡

我們可以使用這個方法來偵測當前的顏色，以避免經常地重復定義它。 這個方法在使用SVG圖標的時候非常有用，因為它們的顏色由其父元素決定。通常我們是這么做的：

SVG顏色

但我們可以使用currentColor這么做：

currentColor

附上其它帶有偽元素的例子：

偽元素

你是否還記得為了解決一些問題而給一幅背景圖設置background-size屬性的時刻呢？現在你可以使用object-fit屬性啦，webkit瀏覽器都支持它，Firefox也將在近期予以支持。

Object Fit

示例

讓我們一起不使用圖片來設置復選框的樣式：

單選框和復選框的樣式

「譯」22個必備的CSS小技巧

單選框和復選框的樣式

正如你所看見的，我們隱藏了原有的復選框，改為使用偽元素和偽類:checked（IE9+）來表現它。當它被選中時，一個設置在content里的Unicode編碼的字符將會顯示出來。

值得注意的是，Unicode編碼在CSS和HTML中的寫法是不一樣的。在CSS中它是一個以反斜杠為開始的十六進制數，而在HTML中它是十進制的，比如?。 接著為我們的復選框添加一些動畫效果：

單選框和復選框的樣式

總所周知CSS中是可以使用計數器的：

CSS中的計數器

CSS中的計數器

我們定義了一個ID在counter-reset屬性中作為初始值（默認為0）。你可以設置另一個值在counter-increment屬性中作為每一步的遞增值。

你可以計算出有多少個復選框被用戶勾選了：

高級CSS計數器

高級CSS計數器

你也可以制作一個簡單的計算器：

簡單的計算器

簡單的計算器

它同樣得以運行，請看具體的DEMO和文章。

你記得你有多么經常被迫需要一個“漢堡”圖標嗎？

這里有至少3個方式去實現它：

1、 Shadows

Shadows

2、 Gradient

Gradient

3、 UTF-8 你可以直接使用標準符號：? (Unicode: U+2630, HTML: ?)。你也可以像其他元素那樣靈活設置它的顏色或大小。看例子。 你也可以使用SVG，字體圖標，或者通過偽元素設置的border邊框。

這是一個新的叫做supports的CSS表達式。顧名思義，它可以檢測某些設定是否被瀏覽器所支持，并非所有的瀏覽器都支持它，但是你仍然可以使用它作為基本的檢測手段：

@Supports

依你估計，把一個設置為visibility: visible的元素放在一個設置為visibility: hidden的元素里面，會發生什么？

visibility: visible

你可能會認為兩個元素都不顯示——然而事實上整個父元素都被隱藏了，而子元素不會。

position: sticky

我們發現了一個新的特性，你可以新建一個sticky屬性的元素。它的運行效果和fixed相同，但不會擋住任何元素。你最好看看例子 只有Mozilla和Safari瀏覽器支持這一屬性，但你也可以像下面那樣使用它：

position: sticky

我們將會在支持的瀏覽器中得到一個sticky屬性的元素，而在不支持的瀏覽器中它將會是一個普通的元素。這在你需要建立一個不可替代的，可以移動的元素的移動端頁面的時候非常實用。

不久之前，一些新的用以描述不同元素大小的尺寸單位問世了，它們是：

有趣的是，幾乎所有的現代瀏覽器都能很好地支持它們，所以你可以放心地使用。 為什么我們需要這些新的單位？因為它們可以讓不同的尺寸更容易被定義，你不要為父元素指定任何的百分比或者別的什么，請看例子：

vh

或者你可以設置一個漂亮的彈出框在屏幕中間：

vh

這看起來酷斃了，看看在codepen的例子吧~ 但是目前仍然有一些關于這些新單位的不足之處：

我們可以通過幾行代碼修改文字被選中時的效果：

文字修飾

你不僅可以定義文字被選中時的顏色，還能定義陰影或者背景顏色。

如果你需要在觸摸屏當中為一些元素設置內滾動，那么你不僅需要overflow: scroll / auto，還需要-webkit-overflow-scrolling: touch; 實際上，移動端瀏覽器在某些時候并不能正確執行overflow: scroll / auto，它可能會滾動整個頁面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個問題，你可以在你的實際項目中體驗一下。

有時候動畫可能會導致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來避免這個問題：

3D硬件加速

你并不會察覺有什么不同，但瀏覽器會為這個元素進行3D硬件加速，在will-change這個特殊屬性未被全面支持之前，這個方法還是很有用的。

你可以用Unicode符號命名class：

用Unicode符號命名class

但這其實是用來搞笑的，千萬不要在大型項目中使用，因為不是所有的電腦都支持Unicode符號。

實際上垂直方向的排列計算是基于父元素的寬度而不是高度。定義兩個元素：

垂直方向的百分比邊距

理論上，子元素的高會是父元素高的一半，但是看看我們實際得到的情況：

垂直方向的百分比邊距

記住，子元素的百分比是相對于父元素的寬度。

Firefox用它自己的方式去計算按鈕的邊距。這聽起來有點奇怪，但它會自動地添加一些邊距進去：

「譯」22個必備的CSS小技巧

可以用以下方法來修復這個問題：

修復火狐瀏覽器的按鈕邊距

很少人知道，定義了一個元素的文字顏色，意味著這個元素的邊框顏色也被定義了：

Color + Border = Border-Color

如果你仍需要適配IE7或者類似的古老瀏覽器，你可以在定義hack的時候使用笑臉符號，像這樣：

關于“必備的CSS小技巧有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“必備的CSS小技巧有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。