<code>原文：https://blog.csdn.net/TriDiamond6/article/details/105222289/<code>
前言
CSS是一個很獨特的語言。看起來非常簡單，但是某種特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！
1、固定底部內容
這種是一個非常常見的佈局方式，但是對於新手來說是比較常見的難題。
這種佈局方式在後臺管理系統中比較常見，當我們內容不足瀏覽器窗口高度時，底部內容需要固定在底部。當內容超出了瀏覽器窗口高度，就會隨著內容往後推。
在有CSS3之前，實現這個效果是頗有難度的。瀏覽器窗口高度是會根據不同用戶打開瀏覽器的情況，屏幕大小的差異和瀏覽器的縮放比例而變。我們需要藉助JavaScript來實時獲取瀏覽器高度進行運算才能實現。雖然說標題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內容高於窗口高度時，就會擋住我們的內容。
隨著CSS3的來臨，最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性，可以在我們的內容標籤元素（比如div）中使用。在我們下面的例子裡使用了main標籤。
我來講解一下實現原理吧。
flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。如果我們使用flex-grow: 0，那這個flex元素就完全不會擴展了。所以我們需要把頭部和底部之間的內容標籤元素設置為flex-grow: 1或者flex-grow: auto，這樣內容部分就會自動填充滿頭部和底部之外的所有空間。
為了避免底部內容受內容部分擴充空間的影響，我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間，這裡我們給了flex-shrink: 0就是為了底部footer的大小不受影響。
我們直接上HTML和CSS代碼看看是怎麼實現的。
HTML
<code>頭部內容
可以添加更多內容看看底部的變化哦！
底部內容
/<code>
CSS
<code>#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {
background: #494949;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
}
h1,p {
padding: 15px;
}
nav > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}/<code>知識點總結：
- flex-grow — 是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間
- flex-shrink — 作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間
2. 懸停放大圖片特效
懸停放大圖片是一個特別吸引眼球的特效，比較常用於可點擊的圖片。當用戶懸停鼠標在圖片上，圖片會稍微的放大。
其實實現這個特效是非常簡單的。首先我們需要一個div包裹這img標籤，這個包裹層是用來遮擋住圖片，當圖片放大時不會出現圖片超出我們規定的寬高以外。
首先我們來講講div包裹的屬性，我們需要給它一個固定的width寬和height高。然後我們必須給予這個元素overflow: hidden屬性。讓圖片放大的時候不會超出這個div元素的寬高。有了這個包裹層，我們就可以編寫img的各種效果了。
我的例子裡面用了transform: scale(1,1)作為懸停時的圖片特效，這個transform是用於改變任何元素的屬性的，然後scale是用於放大（整數就會放大）或者縮小（負數就會縮小）元素的。
上代碼讓大家看看：
html body中放入
<code>/<code>
/<code> CSS
<code>.img-wrapper {
width: 400px;
height: 400px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 400px;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}/<code>如果你們想讓圖片更加炫酷可以加上圖片過濾屬性filter，讓圖片變灰或者變深褐色，然後懸停時候出現更加炫酷的顏色變幻。灰化的屬性是filter: grayscale(100%);，然後深褐色化的屬性是filter: sepia(100%)。其實圖片還有很多過濾屬性的，大家有興趣也可以去嘗試一下哦！
加入特殊效果的代碼如下：
HTML
<code>![]()
/<code>
CSS
<code>/* ============== * 灰度過濾 * ==============*/
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* ============== * 深褐色過濾* ==============*/
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}/<code>
3. 瞬間黑暗模式
最近微信也逃脫不了黑暗時代的到來，網頁也很多都做了黑暗模式的兼容和主題。如果我們在做的一個網站想瞬間實現黑暗模式可以怎麼實現呢？
其實有一個很快的方式，我們可以使用invert和hue-rotate兩個CSS3過濾器來實現。
filter: invert() — 是從0到1的刻度，1是從白變黑。
filter: hue-rotate() — 用於改變你元素的顏色，同時或多或少保持原本相同的色系。這個屬性的值可以從0deg到360deg。
在我們頁面的body標籤上添加這兩個屬性，我們就可以快速嘗試把我們的網站變成"黑暗模式"。這裡需要注意的是，如果body和html上沒有設置background背景顏色，這個過濾就會不起效了哦。
CSS的代碼如下：
<code>html {
background: #fff;
}
body {
background: #fff; filter: invert(1) hue-rotate(270deg);
}/<code>實現效果
這裡我們會發現圖片的顏色會受影響，並不是很美觀，使用css過濾器是無法完美切換黑暗模式的。不過使用JavaScript輔助就可以完美的切換黑暗模式。
最近出了一個JavaScript輔助插件叫Darkmode.js。
Darkmode.js
其實Darkmode.js運用的也是css裡面的一個特性叫mix-blend-mode — “CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合“。加上Javascript的輔助判斷哪些頁面上的元素需要黑化的，哪些是不需要黑化的。就會想我們之前那種做法，導致其他不需要黑化的元素，比如圖片，受到影響導致顏色出現問題。
使用Darkmode.js非常簡單，只要在腳本里面添加以下代碼就可以馬上加入一個插件，
<code> /<code>
如果你不希望用這個插件的默認按鈕，你可以在你的JavaScript代碼中自主控制。我們可以通過.toggle()方法來切換模式，同時可以使用.isActivated()來檢測是否已經進入黑暗模式。
<code>const darkmode = new Darkmode();darkmode.toggle(); console.log(darkmode.isActivated()) // 如果已經進入黑暗模式會返回 true/<code>
知識總結
- filter: invert() — 可以把頁面從白變黑，也可以從黑變白。
- filter: hue-rotate() — 用於改變你元素的顏色，同時或多或少保持原本相同的色系。
- Darkmode.js — 瞬間實現黑暗模式。
4. 自定義列表符號
ul，li的無序列表有默認的符號·，但是在很多情況下我們希望可以給這個符號加入自己的樣式和顏色，甚至是換成自定義的符號。默認的符號我們是無法做任何的樣式處理，而且默認的符號在CSS屬性裡面只有幾個選擇可以使用，很多情況下都是無法滿足我們的設計。
其實自定義無序列表符號不難，我們只需要使用偽元素::before加content屬性就可以實現。
在我這個例子裡面我做了兩個任務列表，一個是待處理任務，一個是已完成任務，各自給了不一樣的列表符號和顏色。
實現原理
一、首先我們禁用了ul的默認符號樣式list-style: none
二、在li的:before偽元素上給予content內容值，待處理任務使用，已完成任務li.completed:before使用✔
三、為了展示效果更加好看我分別給了li和li .completed兩個不同的顏色
上代碼看看是怎麼實現的吧：
HTML
<code>待處理
- 待辦任務1
- 待辦任務2
- 待辦任務3
- 待辦任務4
- 待辦任務5
已完成
- 完成任務1
- 完成任務2
- 完成任務3
CSS
<code>ul {
list-style: none; color: #fff;
font-size: 20px;
border: 3px solid #000;
padding: 1rem 2rem;
min-height: 200px;
margin: 15px 2rem 0 0;
background: #323232;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
li {
padding: 0.3rem 0;
}
li::before {
content: " ";
color: aqua;
}
li.completed::before {
content: "✔ ";
text-decoration: none;
color: greenyellow;
}
li.completed {
text-decoration: line-through;
color: #bdbdbd;
}/<code>::before和::after偽元素加content屬性可以用來做很多特殊的效果，也是當代前端排版比較常用的“魔法”。說到偽元素的使用，我再給大家說一個比較常用的使用場景。
在管理後臺或者是文章展示中，我們經常可以見到的“麵包屑導航”也是用偽元素來插入每個目錄中間的符號的。
實現邏輯
一、這個導航含有3個a標籤，首先給每個a標籤加入一個偽元素::after，然後在content屬性插入/符號。
二、然後使用a:first-child，這個偽類會選擇到第一個a標籤，然後使用content屬性加入»符號。
三、因為我們第一步在每個a標籤的後面插入了/符號, 所以我們需要在最後一個a標籤清除掉。這裡我們使用:last-child選擇到最後一個a標籤，然後用content: " "屬性把偽元素的內容清楚掉。
HTML
CSS
<code>.breadcrumb {
font-size: 1.6rem;
color: #fff;
}
.breadcrumb a:first-child {
color: #82fcfd;
}
.breadcrumb a:first-child::before {
content: " » ";
}
.breadcrumb a::after {
content: " /";
color: #ef6eae;
}
.breadcrumb a:last-child::after {
content: "";
}/<code>知識總結
::before | ::after — 偽元素用於向某些選擇器添加特殊的效果。
content — CSS 屬性用於在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。
:first-child — CSS偽類表示在一組兄弟元素中的第一個元素。
:last-child — CSS偽類代表父元素的最後一個子元素。
