CSS 中 border-width 為何不支持百分比？

01-04

在 CSS2.1 中可以看到：Box model

"border-top-width", "border-right-width", "border-bottom-width", "border-left-width"
Percentages: N/A（就是不支持的意思）

CSS還是根據設計來的。所以要說原因，那就是border的use cases沒有百分比的需求。

padding/margin是空白（或者透出背景），其傳達意義是通過與非空白的內容區域的對比達成。故空白的大小可能與內容相關，也可能與可用空間相關，後者就是百分比。空白起的是輔助的作用，它本身並不需要特別精確，也就是空白多一點少一點影響不大。

border（通常）是有顏色和圖案的。儘管是修飾性的，但與文字、圖片等內容一樣，它是通過對視覺的直接刺激來傳達意義，而不象空白是間接的。border的粗細即使只有1px的變化，對視覺的影響可能很大。設計中一般會將border的寬度視作是確定的，你看border的取值有粗中細，這算是捕捉到的典型的設計需求。

至於說border不支持百分比導致無法全部按照百分比設計，這個其實是偽需求。實際我們需要的是padding或margin能支持百分比減去確定的長度，也就是calc功能。

當然，現在CSS3已經增加了vw/vh等相對於viewport的單位（在絕大多數需求情況下可以取代百分比）。所以理論上你是可以做出類似於百分比寬度的border。［注意：Chrome的當前版本不支持vw/vh單位的border-width，FF支持，其他瀏覽器未測試。］不過設計上是否真的有這樣的需求？我個人覺得普通的邊框應該是沒有的。或許配合border-image可能有。

僅僅個人認為。

相對盒子的其他布局相關屬性（w/h/m/p），b 所承擔的更多是顯示職責，是個相對弱化的「布局」（邊框總要佔點位置吧，但還要負責顯示樣式）相關屬性。因此也就沒有了能靈活控制布局所需的百分比控制需求。

個人觀點。

電腦屏幕是以像素作為單位的，最小是 1px，所以不可能渲染出來 0.5 px 的邊框。如果你設置了邊框的百分比為 1%。計算後得到 0.3px 的邊框寬度。那瀏覽器是渲染這個邊框還是不渲染？

渲染的話，沒法顯示小於 1px 的東西。不渲染的話，你又明明指定要有一個邊框。所以乾脆用固定值了。

不管什麼元素，低於1px都沒辦法識別，border又是經常會在幾個像素之間徘徊的，如果設置了百分比識別不了那豈不是白費功夫，沒必要的事肯定沒必要做

今天剛好被這個問題難倒 border不能用百分比剛好我的盒子又是百分比限制的滑鼠滑入的時候border—left要出現，呼……小白項目做得快，但是微調得花兩倍時間………………暈死啊

這個是以誰為參考點的問題，這幾個屬性無法確定究竟是以父級元素為參考，還是以本身元素為參考對象。

這個比較適合微調，所以才取消的吧