🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1) border 會改變佈局（佔據空間）
border 會參與盒模型，增加元素尺寸。
例如，一個寬度 200px 的元素加上 border: 1px solid #000，實際寬度會變成：
200 + 1px(left) + 1px(right) = 202px
如果不想影響佈局，就很麻煩。
使用 box-shadow: 0 0 0 1px #000不會改變大小，看起來像 border，但不佔空間。
2) border 在高 DPI 設備上容易出現“模糊/不齊”
特別是 0.5px border（髮絲線），在某些瀏覽器上有鋸齒、斷線。
transform: scale(0.5) 或偽元素能做更穩定的髮絲線。
3) border 圓角 + 髮絲線 常出現不規則效果
border + border-radius 在不同瀏覽器的渲染不一致，容易出現不均勻、顏色不一致的問題。
用 outline / box-shadow 圓角更穩定。
4) border 不適合做陰影/多層邊框
如果你需要兩層邊框：
雙層邊框用 border 很難做
而用：
box-shadow: 0 0 0 1px #333, 0 0 0 2px #999;
非常簡單。
5) border 和背景裁剪一起用時容易出 bug
比如 background-clip、overflow: hidden 配合 border 會出現背景被擠壓、不應該被裁剪卻裁剪等問題。
6) hover/active 等狀態切換時會“跳動”
因為 border 會改變元素大小。
例子：
.btn { border: 0; }
.btn:hover { border: 1px solid #000; }
鼠標移上去會抖動，因為尺寸變大了。
用 box-shadow 的話就不會跳。
除了動態外有時候 overflow 也會導致原本剛剛好的佈局不會刪除滾動條，由於有了 border 1px 導致剛好出現滾動條但其實根本滾不了。
總結
邊框可以分別使用border、outline、box-shadow三種方式去實現，其中outline、box-shadow不會像border一樣佔據空間。而box-shadow可以用來解決兩個元素相鄰時邊框變寬的問題。不使用border並不是因為它不好，而是因為outline和box-shadow的兼容性和靈活性相對border會更好一點。
