冷門又好用的 CSS 特性
作者：MudOn Tire
來源：SegmentFault 思否社區(qū)
1. 多列布局（Multi-column Layout）
MDN - CSS Multi-column Layout：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
Can I Use - CSS3 Multi-column Layout：
https://caniuse.com/multicolumn
CSS 提供了對(duì)多列布局的支持。支持設(shè)置布局中的列數(shù) (column-count)、內(nèi)容應(yīng)如何列之間的流動(dòng)規(guī)則、列之間的間距 (column-gap) 以及列分割線（column-rule）的樣式。
比如可以實(shí)現(xiàn)下面的瀑布流效果：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/yLevxRr
主要樣式
.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：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes
Can I Use - CSS writing-mode property：
https://caniuse.com/css-writing-mode
Writing Modes 定義了各種國際書寫模式，例如從左到右（拉丁語、印度語）、從右到左（希伯來語、阿拉伯語）、雙向（混合從左到右和從右到左的語言）和垂直（漢語）。
下面是三種書寫方式的展示：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/Yzreqvx
關(guān)鍵樣式:
.left-to-right {
direction: ltr;
}
.right-to-left {
direction: rtl;
}
.vertical {
writing-mode: vertical-rl;
}
或者，可以用來實(shí)現(xiàn)一個(gè)黑客帝國的 code rain：
Codepen - Matrix code rain 預(yù)覽:
https://codepen.io/mudontire/pen/YzreyWL
3. aspect-ratio 屬性
MDN - aspect-ratio:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
Can I Use - CSS property: aspect-ratio:
https://caniuse.com/mdn-css_properties_aspect-ratio
CSS 的 aspect-ratio 屬性用于設(shè)置元素的首選寬高比，可以自動(dòng)計(jì)算寬度、高度和其他一些布局功能，省去同時(shí)計(jì)算寬和高的工作。
比如，視頻網(wǎng)站可以設(shè)置視頻播放窗口比例為 16/9：
Codepen demo 預(yù)覽:
https://codepen.io/mudontire/pen/mdBXPqB
關(guān)鍵樣式：
.video-box {
width: 70vw;
background-color: #000;
aspect-ratio: 16/9;
}
4. gap 屬性
MDN - gap:
Can I Use - gap property for Flexbox:
https://caniuse.com/flexbox-gap
CSS 的 gap 屬性用于 flex 和 grid 布局時(shí)設(shè)置行和列之間的間隔，是 row-gap 和 column-gap 的簡(jiǎn)寫。
以前在使用 flex 布局的時(shí)候經(jīng)常會(huì)用 margin、padding 來控制 flex item 之間的間隔，用 gap 會(huì)更方便。
比如:
<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 預(yù)覽
5. CSS Shapes
MDN - CSS Shapes:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes
Can I Use - CSS Shapes Level 1：
https://caniuse.com/css-shapes
CSS Shapes 用于描述元素的幾何形狀。元素的常規(guī)形狀就是矩形，使用 CSS Shapes 可以將元素定義為圓、橢圓或多邊形。
對(duì)于 Level 1 規(guī)范，CSS Shapes 可以應(yīng)用于浮動(dòng)元素。該規(guī)范定義了不同的方法來定義浮動(dòng)元素上的形狀。
比如，實(shí)現(xiàn)下面文字環(huán)繞圓形圖片的效果：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/eYGVzdz
關(guān)鍵樣式：
img {
width: 300px;
float: left;
shape-outside: circle(50%);
}
6. object-fit 屬性
MDN - object-fit：
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Can I Use - CSS3 object-fit/object-position：
https://caniuse.com/object-fit
object-fit 屬性用于設(shè)置 replaced element（例如 <img> 或 <video>）的內(nèi)容如何適配其容器的尺寸。
replaced element 鏈接：
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
比如，調(diào)整一張圖片在容器里面的顯示：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/BawYJrQ
7. filter 屬性
MDN - filter：
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Can I Use - CSS Filter Effects：
https://caniuse.com/css-filters
CSS 的 filter 屬性將圖像的效果調(diào)整（模糊、對(duì)比度、灰度、色調(diào)等）應(yīng)用于元素。filter 通常用于調(diào)整圖像、背景和邊框的渲染。
比如，每年的國家公祭日很多網(wǎng)站會(huì)把顏色調(diào)整成黑白，就可以用 filter 一行代碼搞定：
8. backdrop-filter 屬性
與 filter 類似的屬性，backdrop-filter 屬性將圖形效果（例如模糊或顏色偏移）應(yīng)用于元素的背景區(qū)域。因?yàn)樗m用于元素后面的所有內(nèi)容，使用時(shí)需要將元素或其背景至少部分設(shè)置為透明才能看到效果。
MDN - backdrop-filter:
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
Can I Use - CSS Backdrop Filter：
https://caniuse.com/css-backdrop-filter
比如，可以用它做一個(gè)毛玻璃的效果：
Codepen demo 預(yù)覽:
https://codepen.io/mudontire/pen/dyVdqow
關(guān)鍵代碼：
<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() 函數(shù)
MDN - conic-gradient()
Can I Use - conic-gradient()：
https://caniuse.com/mdn-css_types_image_gradient_conic-gradient
CSS 中的 linear-gradient() 函數(shù)大家應(yīng)該接觸的不少，除此之外 gradient 家族中還有 radial-gradient()、conic-gradient() 等，更多類型可參考 MDN - gradient。
MDN - gradient：
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
conic-gradient() 函數(shù)創(chuàng)建一個(gè)圖像，該圖像由漸變色組成，顏色圍繞中心點(diǎn)旋轉(zhuǎn)過渡（而不是從中心輻射）。
例如，常見的漸變色儀表盤圖表就可以用 conic-gradient() 函數(shù)繪制：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/LYzQJLq
10. accent-color 屬性
MDN - accent-color：
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
Can I Use - CSS property: accent-color：
https://caniuse.com/mdn-css_properties_accent-color
CSS 的 accent-color 屬性用于設(shè)置由某些元素生成的 UI 控件的強(qiáng)調(diào)色。比如 <input> 元素生成的 checkbox 和 radio 控件被選中時(shí)的顏色。
比如，改變以下元素的強(qiáng)調(diào)色：
Codepen demo 預(yù)覽;
https://codepen.io/mudontire/pen/XWeZLLa
關(guān)鍵代碼：
<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. 滾動(dòng)捕捉（Scroll Snap）
MDN - CSS Scroll Snap：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
Can I Use - CSS Scroll Snap：
https://caniuse.com/css-snappoints
CSS Scroll Snap 引入了對(duì)滾動(dòng)位置的捕捉，它強(qiáng)制執(zhí)行滾動(dòng)操作完成后滾動(dòng)容器的滾動(dòng)端口可能結(jié)束的位置。
比如，我想讓每次滾動(dòng)結(jié)束的位置都停在下一個(gè)元素開頭，實(shí)現(xiàn)一個(gè)滾動(dòng)翻頁的效果：
Codepen demo 預(yù)覽：
https://codepen.io/mudontire/pen/dyVdxvr
關(guān)鍵代碼：
<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：
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Can I Use - CSS overscroll-behavior：
https://caniuse.com/css-overscroll-behavior
CSS的 overscroll-behavior 屬性用于定義元素滾動(dòng)到滾動(dòng)區(qū)域邊界時(shí)的行為。它是 overscroll-behavior-x 和 overscroll-behavior-y 的簡(jiǎn)寫。
overscroll-behavior-x ：
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x
overscroll-behavior-y：
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y
瀏覽器的默認(rèn)行為是：當(dāng)子元素滾動(dòng)到邊界后繼續(xù)滾動(dòng)鼠標(biāo)，會(huì)觸發(fā)父元素的滾動(dòng)。該行為被稱作 scroll chaining。很多時(shí)候我們不需要這樣的行為，比如當(dāng)我們滾動(dòng)一個(gè)彈窗中的內(nèi)容時(shí)，不希望后面的頁面也跟著滾動(dòng)。通過設(shè)置 overscroll-behavior:contain 就可以修改這一行為，而不需要監(jiān)聽 scroll 事件去阻止冒泡。
