CSS高級使用技巧有哪些

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

CSS

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

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

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

我們看到下面一張圖片。

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

原始圖片

當我們加上以下一段代碼后。

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

CSS代碼

可以看到圖片如下所示。

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

處理過的圖片

有的時候我們將網頁的頂部設置為陰影效果，這個是怎么做到的呢？

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

在頂部增加一個div，設置一個高度，寬度為100%

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

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

得到的代碼如下所示。

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

頁面頂部加陰影

運行完上述代碼后，就可以看到整個頁面頂部有陰影的效果。

假如有一個很簡單的頁面，需要所有的元素都垂直居中顯示，實現的方法其實很簡單。

將與align有關的屬性設置為center。

displag設置為flex。

得到的代碼如下所示。

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

垂直居中的CSS方法

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

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

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

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

元素垂直居中

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

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

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

其實還有一種更簡單的方法，那就是使用負數選擇器。

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

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

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

HTML代碼

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

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

nth-child選擇器

最后看看頁面上的內容呈現，可以看出實際選中的li只有前三個，符合預期。

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

頁面內容

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

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

只需要使用如下一個屬性即可。

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

表格列等寬

實際的效果如下圖所示。

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

表格列等寬

在CSS3中新增了一個calc()方法，用于動態的計算值，不管是數值還是百分比，都可以參與計算。

這個方法非常適用于自適應的容器中，動態計算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時候，不會改變元素之間的布局。

例如以下我們定義的兩個div。

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

CSS屬性

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

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

calc()效果

假設在頁面上有一個很重要的區域，只是只讀的，不能讓鼠標點擊，可以直接禁用掉鼠標點擊事件。

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

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

禁用鼠標點擊

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

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

漸變文字

這個效果是怎么實現的呢?

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

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

我們設置一個h3標簽，然后設置data-text屬性，date-text屬性值與頁面顯示值一樣。

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

HTML元素

然后設置對應的CSS屬性。

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

CSS屬性

當我們在頁面運行后，我們就可以得到上面的文字漸變效果。

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

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

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

模糊文本樣式

得到的效果如下圖所示。

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

模糊文本

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