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

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

面試炫技 OK，項目敢用就等死！

1?? 一行全站旋轉木馬

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

整個頁面像陀螺，用戶 3 秒眩暈。

2?? 負邊距黑洞

.box{margin:-9999px;}

元素直接飛出可視宇宙，滾動條無限長。

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

*{all:unset!important;}

一錘清零所有默認樣式，瀏覽器回到石器時代。

4?? 100 萬陰影疊爆性能

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

GPU 直接跪，Chrome OOM。

5?? 透明滾動條

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

滾動功能還在，但肉眼找不到條，用戶瘋狂點。

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

.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;}

真按鈕被閹割，點的是空氣。

8?? position:sticky 粘死屏

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

元素永遠卡在屏幕外，滾動條拉到骨折也看不見。

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

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

復制粘貼、右鍵菜單全部陣亡。

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

html{filter:blur(100px);}

全屏高斯模糊，用戶體驗直接歸零。

邪修口訣

“屬性當武器，動畫當炸彈；

性能可棄，效果必炸。”

PS

想要正經學習 CSS ，從《CSS 入門課程》開始！