1. 多列布局（Multi-column Layout）
MDN - CSS Multi-column Layout
Can I Use - CSS3 Multi-column Layout
CSS 提供了对多列布局的反对。反对设置布局中的列数 (column-count)、内容应如何列之间的流动规定、列之间的间距 (column-gap) 以及列分割线（column-rule）的款式。
比方能够实现上面的瀑布流成果：
Codepen demo
次要款式：
.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）
MDN - CSS Writing Modes
Can I Use - CSS writing-mode property
Writing Modes 定义了各种国内书写模式，例如从左到右（拉丁语、印度语）、从右到左（希伯来语、阿拉伯语）、双向（混合从左到右和从右到左的语言）和垂直（汉语）。
上面是三种书写形式的展现：
Codepen demo
要害款式:
.left-to-right { direction: ltr;}.right-to-left { direction: rtl;}.vertical { writing-mode: vertical-rl;}或者，能够用来实现一个黑客帝国的 code rain：
Codepen - Matrix code rain
3. aspect-ratio 属性
MDN - aspect-ratio
Can I Use - CSS property: aspect-ratio
CSS 的 aspect-ratio 属性用于设置元素的首选宽高比，能够主动计算宽度、高度和其余一些布局性能，省去同时计算宽和高的工作。
比方，视频网站能够设置视频播放窗口比例为 16/9：
Codepen demo
要害款式：
.video-box { width: 70vw; background-color: #000; aspect-ratio: 16/9;}4. gap 属性
MDN - gap
Can I Use - gap property for Flexbox
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;}Codepen demo
5. CSS Shapes
MDN - CSS Shapes
Can I Use - CSS Shapes Level 1
CSS Shapes 用于形容元素的几何形态。元素的惯例形态就是矩形，应用 CSS Shapes 能够将元素定义为圆、椭圆或多边形。
对于 Level 1 标准，CSS Shapes 能够利用于浮动元素。 该标准定义了不同的办法来定义浮动元素上的形态。
比方，实现上面文字盘绕圆形图片的成果：
Codepen demo
要害款式：
img { width: 300px; float: left; shape-outside: circle(50%);}6. object-fit 属性
MDN - object-fit
Can I Use - CSS3 object-fit/object-position
object-fit 属性用于设置 replaced element（例如 <img> 或 <video>）的内容如何适配其容器的尺寸。
比方，调整一张图片在容器外面的显示：
Codepen demo
7. filter 属性
MDN - filter
Can I Use - CSS Filter Effects
CSS 的 filter 属性将图像的成果调整（含糊、对比度、灰度、色调等）利用于元素。filter 通常用于调整图像、背景和边框的渲染。
比方，每年的国家公祭日很多网站会把色彩调整成黑白，就能够用 filter 一行代码搞定：
8. backdrop-filter 属性
与 filter 相似的属性，backdrop-filter 属性将图形成果（例如含糊或色彩偏移）利用于元素的背景区域。 因为它实用于元素前面的所有内容，应用时须要将元素或其背景至多局部设置为通明能力看到成果。
MDN - backdrop-filter
Can I Use - CSS Backdrop Filter
比方，能够用它做一个毛玻璃的成果：
Codepen demo
要害代码：
<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() 函数
MDN - conic-gradient()
Can I Use - conic-gradient()
CSS 中的 linear-gradient() 函数大家应该接触的不少，除此之外 gradient 家族中还有 radial-gradient()、conic-gradient() 等，更多类型可参考 MDN - gradient。
conic-gradient() 函数创立一个图像，该图像由渐变色组成，色彩围绕中心点旋转过渡（而不是从核心辐射）。
例如，常见的渐变色仪表盘图表就能够用 conic-gradient() 函数绘制：
Codepen demo
10. accent-color 属性
MDN - accent-color
Can I Use - CSS property: accent-color
CSS 的 accent-color 属性用于设置由某些元素生成的 UI 控件的强调色。比方 <input> 元素生成的 checkbox 和 radio 控件被选中时的色彩。
比方，扭转以下元素的强调色：
Codepen demo
要害代码：
<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）
MDN - CSS Scroll Snap
Can I Use - CSS Scroll Snap
CSS Scroll Snap 引入了对滚动地位的捕获，它强制执行滚动操作实现后滚动容器的滚动端口可能完结的地位。
比方，我想让每次滚动完结的地位都停在下一个元素结尾，实现一个滚动翻页的成果：
Codepen demo
要害代码：
<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 属性
MDN - overscroll-behavior
Can I Use - CSS overscroll-behavior
CSS的 overscroll-behavior 属性用于定义元素滚动到滚动区域边界时的行为。 它是 overscroll-behavior-x 和 overscroll-behavior-y 的简写。
浏览器的默认行为是：当子元素滚动到边界后持续滚动鼠标，会触发父元素的滚动。该行为被称作 scroll chaining。很多时候咱们不须要这样的行为，比方当咱们滚动一个弹窗中的内容时，不心愿前面的页面也跟着滚动。通过设置 overscroll-behavior:contain 就能够批改这一行为，而不须要监听 scroll 事件去阻止冒泡。
示例：Codepen demo
好了，目前能想到的就是这么多，心愿对大家更高效、更优雅的画页面有帮忙 ！