邪修 CSS ，10 段“千萬別上生產(chǎn)”的暗黑樣式
——僅供技術(shù)獵奇，切勿真用！

?? 每條都可能：布局爆炸、性能崩潰、可訪問性歸零、設(shè)計(jì)師原地升天

面試炫技 OK，項(xiàng)目敢用就等死！

1?? 一行全站旋轉(zhuǎn)木馬

html{animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

整個(gè)頁面像陀螺，用戶 3 秒眩暈。

2?? 負(fù)邊距黑洞

.box{margin:-9999px;}

元素直接飛出可視宇宙，滾動(dòng)條無限長(zhǎng)。

3?? * { all: unset !important; }

*{all:unset!important;}

一錘清零所有默認(rèn)樣式，瀏覽器回到石器時(shí)代。

4?? 100 萬陰影疊爆性能

.boom{
  box-shadow:
    0 0 0 1px #000,
    0 0 0 2px #000,
    0 0 0 3px #000,
    /* …重復(fù) 100 萬次… */;
}

GPU 直接跪，Chrome OOM。

5?? 透明滾動(dòng)條

::-webkit-scrollbar{width:0;height:0;}

滾動(dòng)功能還在，但肉眼找不到條，用戶瘋狂點(diǎn)。

6?? 純 CSS 死循環(huán)動(dòng)畫

.loop{
  animation:loop .001s steps(1) infinite;
}
@keyframes loop{from,to{background:red;}}

1 毫秒一幀，CPU 100% 占滿。

7?? 偽元素偽造按鈕

.fake::after{
  content:"我是按鈕";
  pointer-events:auto;
  cursor:pointer;
}
.fake{pointer-events:none;}

真按鈕被閹割，點(diǎn)的是空氣。

8?? position:sticky 粘死屏

.stick{position:sticky;top:-100vh;}

元素永遠(yuǎn)卡在屏幕外，滾動(dòng)條拉到骨折也看不見。

9?? 文字不可選 + 右鍵禁用

body{
  user-select:none;
  -webkit-touch-callout:none;
}

復(fù)制粘貼、右鍵菜單全部陣亡。

?? filter:blur(100px) 全站馬賽克

html{filter:blur(100px);}

全屏高斯模糊，用戶體驗(yàn)直接歸零。

邪修口訣

“屬性當(dāng)武器，動(dòng)畫當(dāng)炸彈；

性能可棄，效果必炸?！?/p>

PS

想要正經(jīng)學(xué)習(xí) CSS ，從《CSS 入門課程》開始！