前言

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

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

示例：

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

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

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

示例：

input {
    caret-color: limegreen;
}

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

示例：

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

邊框顏色會(huì)自動(dòng)與文字顏色同步，遵循 DRY 原則，提高代碼可維護(hù)性。

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

示例：

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

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

示例：

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

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

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

示例：

input:placeholder-shown {
    opacity: 0.5;
}

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

示例：

button {
    all: unset;
}

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

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

示例：

.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)化標(biāo)題多行文本平衡該屬性可自動(dòng)調(diào)整多行文本的字?jǐn)?shù)分布，使每行文本長(zhǎng)度盡量均衡，視覺效果更美觀。目前已在 Chrome 115+ 等瀏覽器中獲得支持，尤其適合標(biāo)題、引言等強(qiáng)調(diào)排版的場(chǎng)景。

示例：

h1 {
    text-wrap: balance;
}