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

一、原來不是bug

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

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

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

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

但是，兩者搞在一起，就出現了詭異解析。表格元素如<td>邊框透明度似乎是100%透明度減去<td>定義的透明度值的差值(opacity:1除外)！也就是<td>設定透明度10%，則邊框卻是90%的透明度；而<td>設定透明度90%，邊框卻是10%的透明度。

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

預設我們的<tbody>(便於示範，<td>效果一樣)opacity值為1，於是，我們看到了一片和諧的效果：

但是，我們拖動Demo頁面上的range控制項，修改<tbody>的透明度opacity屬性值，結果，你會發現，<tbody>透明度為90%的時候，我了個擦，邊框直接透明度（肉眼看上去）就是10%透明度的樣子。

Chrome瀏覽器下，最後一行儲存格的邊框似乎不受opacity的影響，如下：

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

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

連IE瀏覽器也不甘落後：

二、造成的問題

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

三、如何避免此尷尬

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

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