好吧，100 個(gè)確實(shí)太多。所以，今天咱們就只關(guān)注 “重中之重”，看一下這 9 個(gè)特別有用的 css 屬性！

1.外部形狀控制

使用 shape-outside 屬性控制定義文本如何環(huán)繞 HTML 元素。此屬性對(duì)于浮動(dòng)元素特別有用。定義的形狀決定了文本圍繞該元素的流動(dòng)，使文本能夠平滑地環(huán)繞非矩形形狀。

圖片

2.滾動(dòng)捕捉類型

使用 scroll-snap-type 屬性用于在滾動(dòng)容器內(nèi)實(shí)現(xiàn)對(duì)齊點(diǎn)之間的平滑過渡。此功能可確保用戶滾動(dòng)瀏覽頁面時(shí)內(nèi)容部分整齊對(duì)齊，從而提供更結(jié)構(gòu)化的用戶體驗(yàn)。此scroll-snap-type屬性控制沿水平軸或垂直軸的滾動(dòng)，并定義如何接合對(duì)齊點(diǎn)。

圖片

3.圖像渲染

使用 image-rendering 性用于確定應(yīng)如何呈現(xiàn)圖像。它告訴瀏覽器在縮放或調(diào)整圖像大小時(shí)應(yīng)使用哪種算法。此屬性對(duì)于 Web 開發(fā)人員在放大或縮小圖像時(shí)保持質(zhì)量特別有用。

圖片

4.混合模式

使用 mix-blend-mode 可以用來混合兩個(gè)或多個(gè)圖層的顏色。此屬性將一個(gè)圖層的顏色與其下方的圖層的顏色混合，在屏幕上創(chuàng)建不同的視覺效果。它在處理背景、重疊元素和圖像時(shí)特別有用。

圖片

5.背景剪輯

使用 background-clip 屬性決定如何剪裁背景。此屬性控制背景是否延伸到內(nèi)容框的邊緣，或者是否被剪裁到內(nèi)邊距和邊框區(qū)域。

圖片

6.背景濾鏡

使用 backdrop-filter 屬性允許我們對(duì)元素后面的內(nèi)容應(yīng)用各種效果。它通常用于模糊背景、更改背景顏色或添加陰影

圖片

7.背面可見性

使用 backface-visibility 屬性決定元素在 3D 空間中旋轉(zhuǎn)時(shí)其背面是否可見。如果背面不可見，瀏覽器就不會(huì)渲染它，從而提高性能

圖片

8.文本強(qiáng)調(diào)

使用 text-emphasis 屬性于強(qiáng)調(diào)文本塊中的某些字符。

圖片

9.禁止用戶選擇

使用 user-select 來管理用戶是否可選擇文本的事件。指定為 none 將無法選擇

圖片

圖片