在改一個小組件的 bug 時，我意外挖出一串 CSS 隱藏技能，直接把 UI 質感拉高了一個檔次——更離譜的是，這些東西居然已經存在了十幾年，而我剛知道。

最魔幻的部分是：

它們一直安靜躺在文檔里，裝死。

你有沒有過這種時刻： 半夜兩點刷 CSS 文檔，困得頭昏腦漲，結果刷著刷著突然看到一行代碼，讓你整個人清醒過來——

“等等，CSS 還能這樣？？？”

上周我就是這個人。 而且不是一次，是好幾次。

我寫 CSS 好多年了。 做過一堆網站，扛過無數布局屠殺現場，自以為對這門語言已經非常熟。

結果事實證明： CSS 一直在對我隱瞞實力。

也大概率在對你隱瞞。

清算，一句看似無聊的問題開始的

同事隨口問我一句： “你知道 CSS 里有多少個函數嗎？”

我愣了幾秒。 腦子里飛快閃過：flexbox 相關的、transform 的、color 的…… 我心里估了個數：40 來個？最多 50？

正確答案：108 個。

一百零八。

我對著 MDN 的列表愣住， 那一刻的感覺就像： 我以為自己住在 CSS 的單間里， 結果旁邊居然有一棟帶花園的 CSS 大別墅， 而且已經蓋好好多年了。

于是我當場決定： 不裝了，攤開看。 我要跳進那個“沒人去翻”的角落， 去看那些“這玩意兒為什么存在”的奇葩特性。

然后，我就挖到了這些東西。

super-ellipse()：一行代碼，做出蘋果級的“圓角方形”

還記得蘋果當年把“不是圓不是方”的那個小圖標形狀搞火嗎？ 介于圓形和圓角矩形之間，又莫名順眼—— 那種形狀有個名字：squircle（超橢圓）。

結果 CSS 現在居然有現成函數做這個：

border-radius: super-ellipse(2);

在我知道這個函數之前： 我一直在用各種詭異的 border-radius 組合， 像調香水一樣調數值， 想靠“邊試邊蒙”凹出一個接近蘋果圖標的形狀—— 接近是接近，就是總有點不對勁。

知道之后： 一句話。 一個函數。 直接給你數學意義上的“完美 squircle”。 那種蘋果圖標打磨多年的形狀，現在可以寫在 CSS 里。

super-ellipse() 目前還是實驗性函數， 大多數瀏覽器要開特性開關才能玩， 它屬于正在長大的 CSS Shapes Level 2 規范的一部分。 你可以把它用在 clip-path、offset-path， 還有新的 corner-shape 上。

簡單說： 就像在你的樣式表里， 塞進了一個會寫高等數學的“形狀雕刻師”。

提前打個預防針： 這玩意兒屬于刀太鋒利的一檔。 生產環境用之前要做好回退方案。 但看著 CSS Working Group 用數學精準度去塑造視覺這件事—— 你真能感覺到： 一些“未來的設計語言”正在被寫進規范。

那個我從來沒當回事的命名空間選擇器

接下來這個，是真的把我三觀擰了一下：

CSS 竟然有“命名空間”（namespace）， 還有一個帶豎線的選擇器。

@namespace wes url(westboss.com);
wes|p { color: red; }

這個語法已經活了 11 年。 十一年啊。

故事還可以更怪一點—— 你甚至可以在 JavaScript 里，用自定義命名空間來創建元素：

document.createElementNS('westboss.com', 'p');

然后你的 CSS 里，就可以只針對這些“在特定命名空間下”的元素，用豎線選擇器去精準上樣式。

現實問題來了：“我真會在日常 HTML 里用它嗎？”

刀架在脖子上講真話： 大概率不會。

但有幾個場景，它是真的有用——

• SVG 定向美化SVG 元素生活在 http://www.w3.org/2000/svg 這個命名空間里。 你可以單獨針對它們寫樣式，不會誤傷同名的 HTML 標簽。
• 寫 XML 的人還沒死光如果你還在服務一些 XML 文檔（是的，世界上仍然有這種崗位）， 命名空間能讓你對不同 XML 詞匯表里的元素進行“無沖突”定向裝扮。
• 第三方小掛件的隔離區你要寫一個可以插到別人站點里的小部件？ 那就自己造一個命名空間，在里面建元素、在 CSS 里用 namespace 選擇器，只給它們上樣式， 外站再亂，你也有自己的一小塊絕對領地。
• Web Components 出現之前的“早期封裝嘗試”現在有 Shadow DOM 之后，大家都靠它解決“樣式隔離”， 但命名空間當年其實是“先發明，再被冷落”的那一批。

你明天就會用上它嗎？ 多半不會。

但它在那兒提醒你一件事： CSS 一開始就不只打算服務 HTML， 它的設計目標是：“可以為任何結構化文檔上妝”。 而這種靈活度，現在還被壓在規范角落吃灰。

@property：那個把我從樣式地獄里拽出來的救命繩

還記得 CSS 自定義屬性嗎？ 那些我們天天寫的：

:root {
  --color: blue;
}

大部分人就用到這里： 當變量用，很好用，也就停了。

但其實它們還有一個很少被用到的“覺醒形態”： 你可以“注冊”它們。

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

為什么這行代碼這么有存在感？

1. 動畫終于——真的——開始正常工作了

沒注冊之前， 你如果想讓漸變角度在 hover 時平滑過渡， 大多情況下只會看到： 咔，直接跳過去。

因為在 CSS 看來： 未注冊的變量 = 一坨字符串， 沒辦法按“角度”去插值。

注冊之后就不一樣了： 你告訴 CSS： “喂，這玩意兒是 <angle> 類型， 你按角度給我算。” 于是漸變開始順滑旋轉， 而不是一言不合瞬移。

2. 你終于能說一句：別給我往下亂傳！

inherits: false 這行， 簡直是我那一周的精神支柱。

我當時在寫一個卡片組件， 這個組件可以嵌套卡片里再套卡片。 問題來了： 我只想在最外層改顏色， 不想所有內層卡片都跟著一起變臉。

改之前： 寫一堆 class，調 specificity，搞得跟寫 CSS 對抗賽一樣。

改之后： 一句話——inherits: false;變量不再自動往子元素身上亂跑， 世界終于安靜下來。

3. default 值變成“理所當然”，而不是“到處兜底”

以前我們防御性寫法是這樣的：

var(--angle, 0deg)

到處寫，到處兜底。

注冊以后： 你只要在 @property 里給一個 initial-value， 所有元素默認就是這個值， 除非你親自去改。

我看到 inherits 的那一刻，真的小聲罵了一句： “這玩意兒早幾年出現，我就不用繞那么多奇怪寫法了。”

我們繞過太多問題繞到都忘了： 原來這些問題是可以被“正面解決”的。

xywh()：矩形也可以有點“高級臉”

需要畫一個矩形 clip-path？ 傳統思路： 用 polygon()，自己算四個角坐標。

現在可以這么寫：

clip-path: xywh(20px 20px 100% 100% round 10px);

語法很直白：

• x 起點
• y 起點
• 寬度
• 高度
• 可選的圓角（round 10px）

更有趣的地方在這兒： 你用 xywh() 做一條路徑， 再讓一個元素沿著這條路徑運動—— 如果你寫了 round， 它轉彎的時候不是硬生生 90° 拐彎， 而是“順著圓角滑過去”。

這種小細節， 就是那種把“能用”變成“好用”、 再從“好用”變成“順眼舒服”的微交互。

crossfade()：當兩張背景圖想談一場體面地分手

你可以用一行 CSS， 在兩張背景圖之間做平滑過渡：

background-image: crossfade(
  url(image1.jpg), 
  url(image2.jpg), 
  50%
);

以前的做法：

• 兩個絕對定位的層
• 各種 z-index
• 再用 opacity 慢慢調

寫完代碼的你， 看著層級關系， 只想把自己 mute 掉。

現在呢：

• 一行 background-image
• 兩張圖
• 一個百分比
• 就是一段真正意義上的 crossfade： 一張淡出，另一張淡入。

那百分比就是混合比例。 你調它，界面就像 DJ 調推子一樣平滑。

小字部分也別忘：

• Safari 從 2011 年就默默支持了
• Firefox ……在路上
• 至于“什么時候到”：大家心照不宣

打印樣式：你以為沒人看，其實瀏覽器替你做了決定

你可能沒認真想過—— 用戶點“打印”那一刻， 瀏覽器會主動對你的頁面“動手腳”：

• 背景圖？去掉。
• 某些顏色？自動調對比度。
• 某些元素？自己決定要不要“省掉”。

這一切都在你不知道的情況下發生， 直到你看到打印預覽，開始懷疑人生。

除非你寫了這句：

print-color-adjust: exact;

默認值是 economy： 翻譯成人話就是——

“瀏覽器你看著辦，怎么省墨怎么來。”

而 exact 則是：

“別動！ 按我設計的給我打出來。 背景圖保留，顏色別改。 相信設計師一次。”

我順著這個屬性一頭扎下去，發現：CSS 打印樣式整個就是另一個平行宇宙。

你可以控制：

• 頁碼顯示
• 自定義紙張尺寸
• 頁面如何分頁
• 哪塊內容必須保持在一頁內

有一次我只用 CSS，做了一套“批量打印信封地址”的排版。 調試過程真的很想把 Chrome 打印預覽扔出窗外—— 它展示的效果，不一定是打印機吐出來的那一個。

但當你終于馴服它的時候， 那種“我用前端控制了紙張”的掌控感， 還是挺爽的。

那些你沒背全的濾鏡函數

快，閉上眼睛想想： 你能說出幾個 CSS filter 函數？

大概率你能想到 blur()， 也許還有 grayscale()， 最多再加一個 contrast()。

但其實，一共有 10 個：

• blur() —— 誰都知道的高斯模糊
• brightness() —— 每次都被忘掉的亮度調節
• contrast() —— 無障礙設計的好幫手
• drop-shadow() —— 當 box-shadow 不夠用了就該它上場
• grayscale() —— 一鍵黑白濾鏡
• hue-rotate() —— 把色相輪裝進 CSS 里
• invert() —— 早期的“偽暗色模式”經典招數
• opacity() —— “既然都有透明度屬性了，那就濾鏡里也再給你一個”
• saturate() —— 增加或拔掉飽和度
• sepia() —— 一鍵老照片情緒

真正讓我眼前一亮的是 hue-rotate()。

你可以把一個元素的整體色彩， 沿著色相環整個旋轉。

再搭配 mix-blend-mode 這種混合模式， 你能做出一堆“看起來像是設計師加了特效”的效果。

在知道這些之前： 我會在 PS 里改色，導出好幾版圖片， 再用 CSS 去切換不同的資源。

知道之后： 一個濾鏡函數， 無限色彩版本， 全由 CSS 變量控制， 而且還能加動畫，hover 一下就變。

CSS 真相：它既簡單到過分，又復雜到離譜

讓我最上頭的一點是—— CSS 有一種很矛盾的雙重氣質。

一方面，它簡單到讓人產生錯覺：

• 一個 display: flex;
• 幾個 margin / padding
• 加兩個媒體查詢

你就能在一個周末搭出一個像模像樣的網站。

但另一方面， 等你刷到 super-ellipse()、命名空間選擇器、 再瞥一眼“彩色字體”的規范（是的，字體本身可以內置多色，這又是一個坑）， 你會突然意識到：

CSS 根本不只是“寫樣式”， 它是一套被默默迭代了幾十年的規范體系。

一層又一層的能力疊上去。 有的家喻戶曉，有的掉進冷宮， 還有一些像 Houdini 那樣， 從 2016 年喊到現在， 依舊處于“半實驗、半落地”的尷尬狀態。

最戳心的現實是： 我寫 CSS 靠這個吃飯好多年了， 卻剛剛才發現，有些特性 2013 年就已經存在。

那條豎線命名空間選擇器？ 11 歲了。

那個幫我解決繼承問題的 @property？ 我本可以提前好幾年少掉很多“黑魔法寫法”。

這會讓你忍不住想： 還有多少東西，就這樣安靜躺在規范里， 等著被你偶然翻到？

輪到你了

現在，真的可以打開 MDN，搜一下：“CSS functions”。

把那 108 個函數的列表慢慢劃過去。

我敢打賭， 你一定會看到某個名字， 然后條件反射一句：

“等下，這也在 CSS 里？？？”

這不是你“學得不夠用功”， 而是這門語言本身就大到超出人類記憶上限。

它太大， 大到沒有人能把它完全裝進腦子里；

它太奇怪， 奇怪到總會有一些規范角落， 是“年少輕狂時拍板、十幾年后還在瀏覽器里”的存在。

你哪天要是覺得： “我已經完全掌握 CSS 了。”

那大概率是你停止學習的那一天。 而你停止學習的那一天， 就是你的代碼開始變得無聊的那一天。

所以，去翻你自己的那個“怪功能”吧。

允許自己把東西寫崩一次。 再用一個之前從沒用過的特性把它修回來。

因為在那 108 個函數里， 很可能藏著一個， 正好是你這些年一直繞著走、 卻從沒意識到可以正面解決的問題。

最近你挖到的冷門 CSS 特性是什么？