2021/07/24

用CSS畫出IE限定的BorderColorLight、BorderColorDark等效果


最近在翻一些古早實作書籍,看到幾個別開生面的 HTML 屬性:BorderColorLight, BorderColorDark,使用 Chrome、FireFox 等支援 HTML5 的瀏覧器來開時會是這樣:


當時只覺得為什麼都是黑白線條,現在該是回來解謎的時候!😉

圖片中的上半部使用到 BorderColorLight, BorderColorDark 屬性,經查才知道是 IE 限定,之後在 IE 裡開啟效果如下:


效果還蠻好看的,原來表格也可以上色彩。

IE 真的好,用 CSS 才驚覺這 BorderColorLight 和 BorderColorDark 是神馬黑技術!

拆解 BorderColorLight 和 BorderColorDark

圖片來源:linuxtopia

Linuxtopia 的圖片真的太到位,連光源都送你了,Light 是指被太陽照到的地方,圖片以淺藍色表示;Dark 則是太陽照不到的地方,圖片以深藍色表示。

理解意思後,就要找 CSS 有沒有可以解的解方。

答案是有的,只是和 IE 相比在 CSS 上並不容易呈現,必須以上下左右獨立設置,回頭看看 IE,簡單明瞭!

原 IE 程式碼:

<table border="2" cellspacing="2" cellpadding="2" 
  width="99%" bordercolordark="#99cc66" bordercolorlight="#ffcccc">
  <caption>Eden IE Table Test</caption>
  <tr>
    <td>IE Column 1</td>
    <td>IE Column 2</td>
    <td>IE Column 3</td>
  </tr>
</table>

改 CSS 程式碼:

在修改前還要說明下,cellspacing 和 cellpadding 這兩個 HTML 屬性又是 IE 限定,這下又多了一道關卡:

圖片來源:維基百科

簡單的說就是填上一堆空白或留白,好在 CSS 這裡相對容易理解,就是多了一道標籤手工活。

<style>
.cssIETable
{
  border-top: 2px solid #ffcccc;
  border-left: 2px solid #ffcccc;
  border-right: 2px solid #99cc66;
  border-bottom: 2px solid #99cc66;
  border-collapse: separate; /*cellspacing */
  border-spacing: 2px;
}
.cssIETable TD {      
   padding: 2;  /*cellpadding*/
} 
</style>
<body>
<table class="cssIETable" border="2"
  width="99%">
  <caption>Eden CSS Table Test</caption>
  <tr>
    <td>CSS Column 1</td>
    <td>CSS Column 2</td>
    <td>CSS Column 3</td>
  </tr>
</table>
</body>


嗯,那復古風味感終於又回來了!😎


See also

沒有留言:

張貼留言