標籤：支援 test 儲存格 ie瀏覽器 cin uc瀏覽器 image 過程 meta
視覺效果如下：
實現這個效果主要用到的是<table>標籤的bordercolorlight和bordercolordark兩個屬性。不過在測試的過程中，我發現有的瀏覽器不支援這兩個屬性，比如我用的UC瀏覽器。但我更換成IE瀏覽器過後，就得到了我想要的立體效果。
註：如果要使用這兩個屬性，前提必須是border的值大於1.
代碼如下：
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 <title>test</title> 9 10 </head>11 12 <body>13 14 <table bgcolor="gray" border="2px" width="500px" height="250px" align="center" cellspacing="5px" cellpadding="5px" bordercolorlight="black" bordercolordark="white">15 <caption><b>凸起的立體效果表格</b></caption>16 <br />17 <tr>18 <td>TouchSky</td> 19 <td>TouchSky</td>20 <td>TouchSky</td>21 </tr>22 23 <tr>24 <td>TouchSky</td>25 <td>TouchSky</td>26 <td>TouchSky</td>27 </tr>28 29 <tr>30 <td>TouchSky</td>31 <td>TouchSky</td>32 <td>TouchSky</td>33 </tr>34 35 <tr>36 <td>TouchSky</td>37 <td>TouchSky</td>38 <td>TouchSky</td>39 </tr>40 41 </table>42 43 44 </body>45 </html>
那麼為什麼使用了bordercolorlight和bordercolordark兩個屬性以後，可以產生凸起的立體效果呢？
bordercolorlight="black" 使外層大表格的左邊和上邊變成了黑色，使每個儲存格的下邊和右邊變成了黑色
bordercolordark="white" 使外層大表格的下邊和右邊變成了白色，使每個儲存格的上邊和左邊變成了白色
通過這兩個屬性結果的中和，就給人造成了視覺上的凸起感受。而要達到凹起效果只需要將白色和黑色對調一下就可以了
用HTML實現凸（凹）起的立體效果的表格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
