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

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)