css：border-collapse屬性與table裡td邊框opacity透明度的詳解

一、原來不是bug

年前遇到此現象，在Chrome瀏覽器下，起初，我還以為是Chrome瀏覽器的bug.

今日原型重現，在各個現代瀏覽器下一測，乖乖隆地咚，都是一個尿性，看來是規範使然，不是bug啊！但是，由於現象實在詭異，到目前也想不通是個怎麼回事，故在這裡示範並詢問在座的小伙伴們，為什麼會有此現象？

現象描述
一個普普通通的table，設定了border-collapse:collapse，合併表格的邊框，這很正常，也很常見。

我們為元素設定opacity透明度值，例如0.1，則元素應該透明度變成10%，包括邊框、背景色等，這也符合我們的理解，很正常。

但是，兩者搞在一起，就出現了詭異解析。表格元素如

邊框透明度似乎是100%透明度減去 定義的透明度值的差值(opacity:1除外)！也就是 設定透明度10%，邊框卻是90%的透明度；而 設定透明度90%，邊框卻是10%的透明度。

文字描述太蒼白，我們還是看實例吧(IE10+, FireFox, Chrome均可)~

默認我們的

(便於演示，​​效果一樣) opacity值為1，於是，我們看到了一片和諧的效果：

#但是，我們拖曳Demo頁面上的range控制項 ，修改

的透明度opacity屬性值，結果，你會發現， 透明度為90%的時候，我了個擦，邊框直接透明度（肉眼看起來）就是10%透明度的樣子。

Chrome瀏覽器下，最後一行單元格的邊框似乎不受opacity的影響，如下截圖：

而FireFox瀏覽器下，則是所有邊框都會差異半透明化：

然後，我們繼續拖動，差不多10%透明度的樣子時候，此時，文字是規規矩矩透明了，但是，邊框的顏色卻反而愈發地清晰起來！ ！

連接IE瀏覽器也不甘落後：

二、造成的問題

我想使用CSS3實現一個淡入淡出的動畫，那效果，詭異如坐針氈！

三、如何避免此尷尬

一般實際開發時候，我們使用的table邊框是單邊框，不是那種格子之類，此時，我們可以：
只對低版本的IE瀏覽器使用border-collapse:collapse；對於進階瀏覽器，刪除border-collapse:collapse聲明，或使用separate重置，然後使用border-spacing#:0移除單元格見你不想要的空白。

於是，透明度就符合正常認知地渲染了！

以上是css：border-collapse屬性與table裡td邊框opacity透明度的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！