前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進階的前提是我的初心~

1. accent-color：輕松定制表單控件主題色過去，默認的單選按鈕和復選框樣式單一且難以調(diào)整，開發(fā)者往往需要借助JavaScript或第三方庫來實現(xiàn)個性化。而accent-color屬性僅用一行代碼，即可將這些元素的選中顏色改為品牌色，極大提升了開發(fā)效率與視覺一致性。

示例：

input[type="checkbox"] {
    accent-color: hotpink;
}

該屬性也適用于radio類型輸入框。目前主流瀏覽器（Chrome 86+、Firefox 75+、Safari 14+）均已支持。

2. caret-color：自定義輸入框光標顏色在深色模式等特定設(shè)計場景中，默認的黑色光標可能顯得突兀。使用caret-color可以精準控制光標的顏色，使其與整體界面風格協(xié)調(diào)，提升輸入體驗的視覺品質(zhì)。

示例：

input {
    caret-color: limegreen;
}

3. currentColor：實現(xiàn)動態(tài)顏色繼承currentColor就像一個“顏色變量”，可自動引用當前元素的文字顏色。這在保持樣式一致性、減少重復代碼方面非常實用，尤其適用于主題切換等場景。

示例：

button {
    color: #007bff;
    border: 2px solid currentColor;
}

邊框顏色會自動與文字顏色同步，遵循 DRY 原則，提高代碼可維護性。

4. ::marker：靈活定制列表標記以往修改列表項目符號通常需要借助偽元素或圖片，現(xiàn)在通過::marker偽元素可直接控制其顏色、字體甚至圖標，代碼更簡潔、擴展性更強。

示例：

li::marker {
    color: crimson;
    font-size: 1.2em;
}

5. :user-valid：更智能的表單驗證反饋與:valid不同，:user-valid只在用戶與表單發(fā)生交互后才顯示驗證結(jié)果，避免頁面一加載就出現(xiàn)錯誤提示，從而提供更友好的用戶體驗。

示例：

input:user-valid {
    border-color: green;
}

可配合:user-invalid共同使用，優(yōu)化表單的驗證提示機制。

6. :placeholder-shown：根據(jù)占位符狀態(tài)設(shè)置樣式該偽類可用于檢測輸入框是否處于顯示占位符的狀態(tài)（即未輸入內(nèi)容），藉此實現(xiàn)動態(tài)樣式效果，如改變透明度、動畫提示等，增強表單的交互性。

示例：

input:placeholder-shown {
    opacity: 0.5;
}

7. all: unset：快速重置元素樣式使用all: unset可以一鍵清除元素的全部默認樣式，包括繼承而來的屬性。這在開發(fā)自定義組件時非常有用，提供了更干凈的樣式起點。

示例：

button {
    all: unset;
}

注意：使用后需重新設(shè)置必要樣式，避免影響可訪問性和功能。

8. inset：簡化絕對定位寫法inset屬性用于同時設(shè)定元素的上、右、下、左定位值，語法與margin和padding類似，大幅簡化絕對定位和固定定位代碼。

示例：

.overlay {
    position: absolute;
    inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0; */
}

.panel {
    inset: 10px 20px; /* 上下10px，左右20px */
}

9. text-wrap: balance：優(yōu)化標題多行文本平衡該屬性可自動調(diào)整多行文本的字數(shù)分布，使每行文本長度盡量均衡，視覺效果更美觀。目前已在 Chrome 115+ 等瀏覽器中獲得支持，尤其適合標題、引言等強調(diào)排版的場景。

示例：

h1 {
    text-wrap: balance;
}