CSS高級(jí)使用技巧有哪些

這篇文章主要為大家展示了“CSS高級(jí)使用技巧有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS高級(jí)使用技巧有哪些”這篇文章吧。

CSS

如何將一張彩色的圖片在頁面上展示成黑白圖片呢？

我們需要用到一個(gè)filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。

使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。

我們看到下面一張圖片。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

原始圖片

當(dāng)我們加上以下一段代碼后。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

CSS代碼

可以看到圖片如下所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

處理過的圖片

有的時(shí)候我們將網(wǎng)頁的頂部設(shè)置為陰影效果，這個(gè)是怎么做到的呢？

利用body的偽元素:before，可以減少額外的元素。

在頂部增加一個(gè)div，設(shè)置一個(gè)高度，寬度為100%

將其position設(shè)置為fixed，然后設(shè)置偏移量為設(shè)定的高度值。

設(shè)置box-shadow屬性，值等于設(shè)定的高度值。

得到的代碼如下所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

頁面頂部加陰影

運(yùn)行完上述代碼后，就可以看到整個(gè)頁面頂部有陰影的效果。

假如有一個(gè)很簡(jiǎn)單的頁面，需要所有的元素都垂直居中顯示，實(shí)現(xiàn)的方法其實(shí)很簡(jiǎn)單。

將與align有關(guān)的屬性設(shè)置為center。

displag設(shè)置為flex。

得到的代碼如下所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

垂直居中的CSS方法

設(shè)置以后，我們可以看到不管將窗口設(shè)置為多高，所有元素都是垂直居中的狀態(tài)。

但是這種方法有個(gè)弊端，就是會(huì)將所有元素水平排列，垂直居中，頁面元素過多時(shí)，頁面會(huì)被水平撐開，不太美觀。

因此這種方法建議在頁面元素少的情況下使用。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

元素垂直居中

在一個(gè)使用ul>li創(chuàng)建的列表中，如果想要選擇其中的幾個(gè)元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個(gè)元素。

那么假如我們想選擇第一個(gè)到第三個(gè)元素，使用nth-child該怎么做呢？

很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設(shè)置屬性。

其實(shí)還有一種更簡(jiǎn)單的方法，那就是使用負(fù)數(shù)選擇器。

:nth-child(-n+3)，就代表選擇從第一個(gè)到第三個(gè)元素。

我們可以通過以下例子測(cè)試，首先在看看頁面的HTML代碼，并將它們的display全部設(shè)置為none，這樣就可以將li全部隱藏起來。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

HTML代碼

然后通過nth-child選擇器設(shè)置css屬性。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

nth-child選擇器

最后看看頁面上的內(nèi)容呈現(xiàn)，可以看出實(shí)際選中的li只有前三個(gè)，符合預(yù)期。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

頁面內(nèi)容

頁面的table元素，如果不對(duì)tr>td設(shè)置寬度，列td的寬度是會(huì)隨著內(nèi)容的變化而變化，這樣就會(huì)造成頁面布局很難看。

我們可以將表格的每列設(shè)置成相同的寬度，這樣不管內(nèi)容怎么變化都不會(huì)改變頁面的布局。

只需要使用如下一個(gè)屬性即可。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

表格列等寬

實(shí)際的效果如下圖所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

表格列等寬

在CSS3中新增了一個(gè)calc()方法，用于動(dòng)態(tài)的計(jì)算值，不管是數(shù)值還是百分比，都可以參與計(jì)算。

這個(gè)方法非常適用于自適應(yīng)的容器中，動(dòng)態(tài)計(jì)算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時(shí)候，不會(huì)改變?cè)刂g的布局。

例如以下我們定義的兩個(gè)div。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

CSS屬性

看到的頁面效果如下圖所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

calc()效果

假設(shè)在頁面上有一個(gè)很重要的區(qū)域，只是只讀的，不能讓鼠標(biāo)點(diǎn)擊，可以直接禁用掉鼠標(biāo)點(diǎn)擊事件。

這個(gè)在CSS3中新增了pointer-event屬性，只要將其設(shè)置為none即可。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

禁用鼠標(biāo)點(diǎn)擊

有的時(shí)候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

漸變文字

這個(gè)效果是怎么實(shí)現(xiàn)的呢?

通過設(shè)置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個(gè)屬性是專門用來產(chǎn)生遮罩效果的。

然后將遮罩效果的字與原來的文章重合，就可以達(dá)到上述效果。

我們?cè)O(shè)置一個(gè)h3標(biāo)簽，然后設(shè)置data-text屬性，date-text屬性值與頁面顯示值一樣。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

HTML元素

然后設(shè)置對(duì)應(yīng)的CSS屬性。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

CSS屬性

當(dāng)我們?cè)陧撁孢\(yùn)行后，我們就可以得到上面的文字漸變效果。

和上面的漸變文本類似，模糊文本也有專門的屬性可以設(shè)置，那就是text-shadow。

通過下面一段簡(jiǎn)單的代碼，就可以得到模糊文本了。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

模糊文本樣式

得到的效果如下圖所示。

CSS高級(jí)使用技巧，讓你的頁面更加炫酷，工作效率更高

模糊文本

以上是“CSS高級(jí)使用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！