這篇文章主要介紹了必備的CSS小技巧有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇必備的CSS小技巧有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了門(mén)頭溝免費(fèi)建站歡迎大家使用！

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

混合模式

漸變邊框

現(xiàn)在，你甚至可以在邊框中使用漸變。 要使用漸變邊框非常簡(jiǎn)單，只需要設(shè)置一個(gè)更低z-index的偽元素即可：

漸變邊框

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

border-image

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

z-index的過(guò)渡

我們可以使用這個(gè)方法來(lái)偵測(cè)當(dāng)前的顏色，以避免經(jīng)常地重復(fù)定義它。 這個(gè)方法在使用SVG圖標(biāo)的時(shí)候非常有用，因?yàn)樗鼈兊念伾善涓冈貨Q定。通常我們是這么做的：

SVG顏色

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

currentColor

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

偽元素

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

Object Fit

示例

讓我們一起不使用圖片來(lái)設(shè)置復(fù)選框的樣式：

單選框和復(fù)選框的樣式

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

單選框和復(fù)選框的樣式

正如你所看見(jiàn)的，我們隱藏了原有的復(fù)選框，改為使用偽元素和偽類: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à)效果：

單選框和復(fù)選框的樣式

總所周知CSS中是可以使用計(jì)數(shù)器的：

CSS中的計(jì)數(shù)器

CSS中的計(jì)數(shù)器

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

你可以計(jì)算出有多少個(gè)復(fù)選框被用戶勾選了：

高級(jí)CSS計(jì)數(shù)器

高級(jí)CSS計(jì)數(shù)器

你也可以制作一個(gè)簡(jiǎn)單的計(jì)算器：

簡(jiǎn)單的計(jì)算器

簡(jiǎn)單的計(jì)算器

它同樣得以運(yùn)行，請(qǐng)看具體的DEMO和文章。

你記得你有多么經(jīng)常被迫需要一個(gè)“漢堡”圖標(biāo)嗎？

這里有至少3個(gè)方式去實(shí)現(xiàn)它：

1、 Shadows

Shadows

2、 Gradient

Gradient

3、 UTF-8 你可以直接使用標(biāo)準(zhǔn)符號(hào)：? (Unicode: U+2630, HTML: ?)。你也可以像其他元素那樣靈活設(shè)置它的顏色或大小?？蠢?。 你也可以使用SVG，字體圖標(biāo)，或者通過(guò)偽元素設(shè)置的border邊框。

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

@Supports

依你估計(jì)，把一個(gè)設(shè)置為visibility: visible的元素放在一個(gè)設(shè)置為visibility: hidden的元素里面，會(huì)發(fā)生什么？

visibility: visible

你可能會(huì)認(rèn)為兩個(gè)元素都不顯示——然而事實(shí)上整個(gè)父元素都被隱藏了，而子元素不會(huì)。

position: sticky

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

position: sticky

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

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

有趣的是，幾乎所有的現(xiàn)代瀏覽器都能很好地支持它們，所以你可以放心地使用。 為什么我們需要這些新的單位？因?yàn)樗鼈兛梢宰尣煌某叽绺菀妆欢x，你不要為父元素指定任何的百分比或者別的什么，請(qǐng)看例子：

vh

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

vh

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

我們可以通過(guò)幾行代碼修改文字被選中時(shí)的效果：

文字修飾

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

如果你需要在觸摸屏當(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)整個(gè)頁(yè)面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個(gè)問(wèn)題，你可以在你的實(shí)際項(xiàng)目中體驗(yàn)一下。

有時(shí)候動(dòng)畫(huà)可能會(huì)導(dǎo)致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來(lái)避免這個(gè)問(wèn)題：

3D硬件加速

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

你可以用Unicode符號(hào)命名class：

用Unicode符號(hào)命名class

但這其實(shí)是用來(lái)搞笑的，千萬(wàn)不要在大型項(xiàng)目中使用，因?yàn)椴皇撬械碾娔X都支持Unicode符號(hào)。

實(shí)際上垂直方向的排列計(jì)算是基于父元素的寬度而不是高度。定義兩個(gè)元素：

垂直方向的百分比邊距

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

垂直方向的百分比邊距

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

Firefox用它自己的方式去計(jì)算按鈕的邊距。這聽(tīng)起來(lái)有點(diǎn)奇怪，但它會(huì)自動(dòng)地添加一些邊距進(jìn)去：

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

可以用以下方法來(lái)修復(fù)這個(gè)問(wèn)題：

修復(fù)火狐瀏覽器的按鈕邊距

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

Color + Border = Border-Color

如果你仍需要適配IE7或者類似的古老瀏覽器，你可以在定義hack的時(shí)候使用笑臉?lè)?hào)，像這樣：

關(guān)于“必備的CSS小技巧有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“必備的CSS小技巧有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：必備的CSS小技巧有哪些
標(biāo)題來(lái)源：http://www.rwnh.cn/article34/gopcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、電子商務(wù)、用戶體驗(yàn)、軟件開(kāi)發(fā)、網(wǎng)站制作、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)