1. 多列布局（Multi-column Layout）
CSS 提供了對多列布局的支援。支援設定佈局中的列數 (column-count)、內容應如何列之間的流動規則、列之間的間距 (column-gap) 以及列分割線（column-rule）的樣式。
比如可以實現下面的瀑布流效果：
主要樣式：
.masonry {
width: 1440px;
margin: 20px auto;
columns: 4;
column-gap: 30px;
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
img {
width: 100%;
}
}
}2. 書寫模式（Writing Modes）
Writing Modes 定義了各種國際書寫模式，例如從左到右（拉丁語、印度語）、從右到左（希伯來語、阿拉伯語）、雙向（混合從左到右和從右到左的語言）和垂直（漢語）。
下面是三種書寫方式的展示：
關鍵樣式:
.left-to-right {
direction: ltr;
}
.right-to-left {
direction: rtl;
}
.vertical {
writing-mode: vertical-rl;
}或者，可以用來實現一個黑客帝國的 code rain：
3. aspect-ratio 屬性
CSS 的 aspect-ratio 屬性用於設定元素的首選寬高比，可以自動計算寬度、高度和其他一些佈局功能，省去同時計算寬和高的工作。
比如，視訊網站可以設定視訊播放視窗比例為 16/9：
關鍵樣式：
.video-box {
width: 70vw;
background-color: #000;
aspect-ratio: 16/9;
}4. gap 屬性
CSS 的 gap 屬性用於 flex 和 grid 佈局時設定行和列之間的間隔，是 row-gap 和 column-gap 的簡寫。
以前在使用 flex 佈局的時候經常會用 margin、padding 來控制 flex item 之間的間隔，用 gap 會更方便。
比如:
<div class="flex-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.flex-box {
display: flex;
width: 400px;
flex-wrap: wrap;
gap: 20px;
}
.item {
width: 120px;
height: 60px;
background-color: c·rimson;
}
5. CSS Shapes
CSS Shapes 用於描述元素的幾何形狀。元素的常規形狀就是矩形，使用 CSS Shapes 可以將元素定義為圓、橢圓或多邊形。
對於 Level 1 規範，CSS Shapes 可以應用於浮動元素。 該規範定義了不同的方法來定義浮動元素上的形狀。
比如，實現下面文字環繞圓形圖片的效果：
關鍵樣式：
img {
width: 300px;
float: left;
shape-outside: circle(50%);
}6. object-fit 屬性
object-fit 屬性用於設定 replaced element（例如 <img> 或 <video>）的內容如何適配其容器的尺寸。
比如，調整一張圖片在容器裡面的顯示：
7. filter 屬性
CSS 的 filter 屬性將影像的效果調整（模糊、對比度、灰度、色調等）應用於元素。filter 通常用於調整影像、背景和邊框的渲染。
比如，每年的國家公祭日很多網站會把顏色調整成黑白，就可以用 filter 一行程式碼搞定：
8. backdrop-filter 屬性
與 filter 類似的屬性，backdrop-filter 屬性將圖形效果（例如模糊或顏色偏移）應用於元素的背景區域。 因為它適用於元素後面的所有內容，使用時需要將元素或其背景至少部分設定為透明才能看到效果。
比如，可以用它做一個毛玻璃的效果：
關鍵程式碼：
<div class="box">
<p>
If I know what love is
<br />it is because of you
</p>
</div>.box {
background: url(../images/roses.jpg) no-repeat;
}
p {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
color: white;
}9. conic-gradient() 函式
CSS 中的 linear-gradient() 函式大家應該接觸的不少，除此之外 gradient 家族中還有 radial-gradient()、conic-gradient() 等，更多型別可參考 MDN - gradient。
conic-gradient() 函式建立一個影像，該影像由漸變色組成，顏色圍繞中心點旋轉過渡（而不是從中心輻射）。
例如，常見的漸變色儀表盤圖表就可以用 conic-gradient() 函式繪製：
10. accent-color 屬性
CSS 的 accent-color 屬性用於設定由某些元素生成的 UI 控制元件的強調色。比如 <input> 元素生成的 checkbox 和 radio 控制元件被選中時的顏色。
比如，改變以下元素的強調色：
關鍵程式碼：
<input type="checkbox" class="checkbox" checked />
<input type="radio" class="radio" checked />
<input type="range" class="range" />
<progress value="70" max="100" class="progress">70%</progress>.checkbox {
width: 40px;
height: 40px;
accent-color: crimson;
}
.radio {
width: 40px;
height: 40px;
accent-color: dodgerblue;
}
.range {
width: 200px;
accent-color: lawngreen;
}
.progress {
width: 200px;
accent-color: coral;
}11. 滾動捕捉（Scroll Snap）
CSS Scroll Snap 引入了對滾動位置的捕捉，它強制執行滾動操作完成後滾動容器的滾動埠可能結束的位置。
比如，我想讓每次滾動結束的位置都停在下一個元素開頭，實現一個滾動翻頁的效果：
關鍵程式碼：
<article class="scroller">
<section>
<h2>Page one</h2>
</section>
<section>
<h2>Page two</h2>
</section>
<section>
<h2>Page three</h2>
</section>
<section>
<h2>Page four</h2>
</section>
</article>.scroller {
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {
scroll-snap-align: start;
}12. overscroll-behavior 屬性
CSS的 overscroll-behavior 屬性用於定義元素滾動到滾動區域邊界時的行為。 它是 overscroll-behavior-x 和 overscroll-behavior-y 的簡寫。
瀏覽器的預設行為是：當子元素滾動到邊界後繼續滾動滑鼠，會觸發父元素的滾動。該行為被稱作 scroll chaining。很多時候我們不需要這樣的行為，比如當我們滾動一個彈窗中的內容時，不希望後面的頁面也跟著滾動。通過設定 overscroll-behavior:contain 就可以修改這一行為，而不需要監聽 scroll 事件去阻止冒泡。
示例：Codepen demo
好了，目前能想到的就是這麼多，希望對大家更高效、更優雅的畫頁面有幫助 ?！