1、clip-path屬性
clip-path 屬性非常有趣，它允許我們使用 css 創建不同類型的復雜形狀（橢圓、圓形、多邊形和其他不同的形狀）。
該屬性可以幫助我們通過定義顯示元素的哪些部分來創建復雜的形狀。clip-path 可以采用不同的值，例如形狀函數和剪輯源。我們可以在 MDN 文檔上了解有關該屬性的更多信息。
這是一個代碼語法示例：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
如果我們想使用屬性 clip-path 輕松創建復雜的形狀，我強烈建議使用名為 clip-path-maker 的工具。它是 100% 免費的，允許我們使用拖放功能創建形狀。創建形狀后，該工具會自動為我們生成 CSS 代碼。
2、writing-mode 屬性
CSS writing-mode 屬性允許我們定義文本行是垂直還是水平布局。除此之外，它還允許設置塊的前進方向。
所有主流瀏覽器都支持該屬性，并且可以采用以下值：
horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr
這是一個代碼示例：
h1{
writing-mode: vertical-lr;
}
h2{
writing-mode: horizontal-tb;
}
演示示例：https://codepen.io/MehdiAoussiad/pen/WNoYOEN
3、user-select 屬性
如果我們想阻止用戶突出顯示或選擇網頁上的文本，CSS 中的 user-select 屬性很有用。該屬性定義是否可以選擇元素的文本。
因為默認情況下，當我們使用鼠標雙擊文本時，它將被選中（突出顯示）。屬性 user-select 可用于防止這種情況發生。
這是一個代碼示例：
div{
user-select: none;
}
4、object-fit
屬性 object-fit 允許我們設置或定義應如何調整替換元素的內容（img、video 等）以適應其容器。
所有主要瀏覽器都支持此屬性。它可以采用以下值：fill、contain、cover、scale-down 和 none。我們可以在 MDN 文檔中了解有關這些值的更多信息。
下面的代碼示例允許圖像保持其縱橫比并填充給定的尺寸。圖像被剪裁以適合。
看看下面的例子：
div{
backface-visibility: hidden;
}
演示示例：https://codepen.io/MehdiAoussiad/pen/vYxedpK
5、backface-visibility 屬性
CSS 中的 backface-visibility 屬性設置元素的背面在面向用戶時是否可見。
在創建具有懸停效果的翻轉卡片時，通常會使用此屬性。它可以采用以下兩個值之一：visible 或者 hidden。
這是一個代碼示例：
div{
backface-visibility: hidden;
}
演示示例：https://codepen.io/ananyaneogi/pen/Ezmyeb
6、mix-blend-mode 屬性
CSS mix-blend-mode 屬性是另一個沒有被人談論與使用的屬性。大多數 Web 開發人員甚至都不知道。
該屬性設置并定義了元素的內容應如何與父元素的內容及其背景混合。讓我們簡單地說它定義了一個元素和它背后的另一個元素之間的混合。
這個屬性有很多值，例如 normal 、 multiply 、 overlay 、 screen 等等。
這是一個代碼示例：
.parent img{
position: absolute;
}
.parent h1 {
mix-blend-mode: overlay;
}
演示示例：https://codepen.io/annafromduomly/pen/NWWdOPN
7、background-blend-mode
CSS 中的 background-blend-mode是另一個有用的混合模式屬性，它允許定義和設置元素的背景圖像和背景顏色之間的混合。
該屬性有許多值（正常、乘法、屏幕等），可讓我們設置不同的混合模式。除舊版本外，所有主要瀏覽器都支持它。
看看下面的例子：
混合模式：正常
div{
background: url("tree.png"), url("paper.png");
background-blend-mode: normal;
}
輸出：
混合模式：疊加
div{
background: url("tree.png"), url("paper.png");
background-blend-mode: overlay;
}
輸出：
8、place-items屬性
CSS place-items 屬性是 align-items 和 justify-items 兩個屬性的絕佳簡寫。 它允許我們在 Flexbox 或 Grid 等布局系統中輕松地在兩個方向（內聯和塊）對齊元素。
該屬性可以一次取兩個值。 但如果我們只使用一個值，該值將自動用作第二個值。place-items 屬性可以采用以下值：center、start、end、stretch 等等。
這是一個代碼示例：
div{
place-items: center stretch;
}
9、resize屬性
CSS 中的 resize 屬性允許用戶通過單擊并拖動元素的右上角來調整網頁上元素的大小。 因此，它定義了用戶是否以及如何調整元素的大小。
該屬性通常用于 textarea 等元素，用戶可以輕松調整文本區域的大小以編寫長格式文本。
有 4 個值可以與 resize 屬性一起使用：
- vertical：用戶可以垂直調整元素的大小。
- horizontal：用戶可以水平調整元素的大小。
- both：元素可以在兩個方向上調整大小。
- none：元素不能調整大小。
這是一個代碼示例：
textarea{
resize: none;
}
