01：外部形狀控制

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

圖片

02：滾動捕捉類型

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

圖片

03：圖像渲染

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

圖片

04：混合模式

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

圖片

05：背景剪輯

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

圖片

06：背景濾鏡

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

圖片

07：背面可見性

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

圖片

08：文本強調(diào)

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

圖片

09：禁止用戶選擇

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

圖片