文：https://blog.csdn.net/TriDiamond6/article/details/105222289

前言

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

<div id="document">  
  <nav>    
  <h1>頭部內容</h1>  
</nav>  
<main>    
  <p>可以添加更多內容看看底部的變化哦！</p>  
</main>  
<footer>    
  <h1>底部內容</h1>  
</footer>
</div>

CSS

#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;
}

知識點總結：

• 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中放入

<div class="img-wrapper">  
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>

CSS

.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;
}

如果你們想讓圖片更加炫酷可以加上圖片過濾屬性filter，讓圖片變灰或者變深褐色，然后懸停時候出現更加炫酷的顏色變幻。灰化的屬性是filter: grayscale(100%);，然后深褐色化的屬性是filter: sepia(100%)。其實圖片還有很多過濾屬性的，大家有興趣也可以去嘗試一下哦！

加入特殊效果的代碼如下：

HTML

<!-- 灰度過濾 -->
<div class="img-wrapper">  
  <img    class="grayscale-img"    src="https://img-blog.csdnimg.cn/2020032211021728.png"  />
</div>
<!-- 深褐色過濾 -->
<div class="img-wrapper">  
  <img    class="sepia-img"    src="https://img-blog.csdnimg.cn/2020032122230564.png"  />
</div>

CSS

/* ============== * 灰度過濾 * ==============*/
.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);
}

3. 瞬間黑暗模式

最近微信也逃脫不了黑暗時代的到來，網頁也很多都做了黑暗模式的兼容和主題。如果我們在做的一個網站想瞬間實現黑暗模式可以怎么實現呢？

其實有一個很快的方式，我們可以使用invert和hue-rotate兩個CSS3過濾器來實現。

filter: invert() — 是從0到1的刻度，1是從白變黑。

filter: hue-rotate() — 用于改變你元素的顏色，同時或多或少保持原本相同的色系。這個屬性的值可以從0deg到360deg。

在我們頁面的body標簽上添加這兩個屬性，我們就可以快速嘗試把我們的網站變成"黑暗模式"。這里需要注意的是，如果body和html上沒有設置background背景顏色，這個過濾就會不起效了哦。

CSS的代碼如下：

html {  
  background: #fff;
}
body {  
  background: #fff;  filter: invert(1) hue-rotate(270deg);
}

實現效果

這里我們會發現圖片的顏色會受影響，并不是很美觀，使用css過濾器是無法完美切換黑暗模式的。不過使用JavaScript輔助就可以完美的切換黑暗模式。

最近出了一個JavaScript輔助插件叫Darkmode.js。

Darkmode.js

其實Darkmode.js運用的也是css里面的一個特性叫mix-blend-mode — “CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合“。加上Javascript的輔助判斷哪些頁面上的元素需要黑化的，哪些是不需要黑化的。就會想我們之前那種做法，導致其他不需要黑化的元素，比如圖片，受到影響導致顏色出現問題。

使用Darkmode.js非常簡單，只要在腳本里面添加以下代碼就可以馬上加入一個插件，

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js">
  </script>
<script>  
  // 這些是這個插件的可配置項：  
  var options = {    
    bottom: "32px", // 定位底部距離 - 默認: '32px'    
    right: "32px", // 定位右邊距離 - 默認: '32px'    
    left: "unset", // 定位左邊距離 - 默認: 'unset'    
    time: "0.5s", // 默認動畫時間: '0.3s'    
    mixColor: "#fff", // 需要改變的顏色 - 默認: '#fff'    
    backgroundColor: "#fff", // 背景顏色 - 默認: '#fff'    
    buttonColorDark: "#262728", // 黑暗模式下按鈕顏色 - 默認: '#100f2c'    
    buttonColorLight: "#fff", // 日間模式下按鈕顏色 - 默認: '#fff'    
    saveInCookies: true, // 是否在cookie保存當前模式 - 默認: true,    
    label: "", // 切換模式按鈕圖標 - 默認: ''    
    autoMatchOsTheme: true // 是否自動根據系統適應模式 - 默認: true  
  };  
let darkmode = new Darkmode(options);  
darkmode.showWidget();
</script>

如果你不希望用這個插件的默認按鈕，你可以在你的JavaScript代碼中自主控制。我們可以通過.toggle()方法來切換模式，同時可以使用.isActivated()來檢測是否已經進入黑暗模式。

const darkmode =  new Darkmode();darkmode.toggle();
console.log(darkmode.isActivated()) 
// 如果已經進入黑暗模式會返回 true

知識總結

• 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

<div>  
  <h2>待處理</h2>  
	<ul>    
		<li>待辦任務1</li>    
		<li>待辦任務2</li>    
		<li>待辦任務3</li>    
		<li>待辦任務4</li>    
		<li>待辦任務5</li>  
	</ul>
</div>
<div>  
  <h2>已完成</h2>  
	<ul>    
  	<li class="completed">完成任務1</li>    
		<li class="completed">完成任務2</li>    
		<li class="completed">完成任務3</li>  
	</ul>
</div>

CSS

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;
}

::before和::after偽元素加content屬性可以用來做很多特殊的效果，也是當代前端排版比較常用的“魔法”。說到偽元素的使用，我再給大家說一個比較常用的使用場景。

在管理后臺或者是文章展示中，我們經常可以見到的“面包屑導航”也是用偽元素來插入每個目錄中間的符號的。

實現邏輯

一、這個導航含有3個a標簽，首先給每個a標簽加入一個偽元素::after，然后在content屬性插入/符號。

二、然后使用a:first-child，這個偽類會選擇到第一個a標簽，然后使用content屬性加入?符號。

三、因為我們第一步在每個a標簽的后面插入了/符號, 所以我們需要在最后一個a標簽清除掉。這里我們使用:last-child選擇到最后一個a標簽，然后用content: " "屬性把偽元素的內容清楚掉。

HTML

<div class="breadcrumb">  
  <a>三鉆</a>  
	<a>前端</a>  
	<a>教程</a>
</div>

CSS

.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: "";
}

知識總結

::before | ::after — 偽元素用于向某些選擇器添加特殊的效果。

content — CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

:first-child — CSS偽類表示在一組兄弟元素中的第一個元素。

:last-child — CSS偽類代表父元素的最后一個子元素。