Blocks: Web Tables CSS Border Properties

圖文框設計:表格1.2.3/圖片/非圖表物件/圖層

Web Design: Blocks - Epistemological/Digital Aesthetics - Formation Methodology

網站/網頁設計:圖文框實作-知識美學/數位美學之建構方法

Blocks include pictures, tables and other objects such as shape and border, division, inline frames, embedded maps, photo gallery... etc.

在 CSS3 之後，邊框設計的增益式屬性設計，比從前版本增加了許多彈性，是改變較大的1組命令。

CSS3 邊框增益式設計

CSS3 邊框的增益式屬性設計，增加了許多，但複雜並不表示好看；統雄老師建議使用2個：border-style 邊框樣式、border-color 邊框色彩。

border-style 邊框樣式

邊框樣式一樣有許多選擇，統雄老師同樣建議，使用2-3種變化即可。

基本型：實線型

即預設，不需要程式增益，而實線寬度由以下屬性設定，如 10px 寬：

border-width: 10px;

凸型

border-style: ridge;

凹型

border-style: groove;

在實務上，凸型或凹型任選一即可，統雄老師建議，優先選凸型。 

border-color 邊框色彩

根據數位色彩設計與TX 選色與四大配色定律，就是將 3 原色中，除掉個性太強的紅色，而以其他的2色作排列組合，可得 3 組溫和的邊框色彩。

設計使用者 class

在正規設計上，應先將以上設計構想，寫成 class，如下：

實線型

.border0 {border: 0px; padding:2px; text-align:left; vertical-align : top;}
.border1 {border: 1px solid #FFCC66; padding:2px; text-align:left; vertical-align : top;}
.bordery {border: 4px solid #FFCC66; padding:2px; text-align:left; vertical-align : top;}
.borderb {border: 4px solid #00CCFF; padding:2px; text-align:left; vertical-align : top;}
.borderp {border: 4px solid #CC00FF; padding:2px; text-align:left; vertical-align : top;}

凹凸型 

.boxb {
border-style: ridge;
border-width: 10px;
border-color: #00ccff;
}

.boxp {
border-style: ridge;
border-width: 10px;
border-color: #cc00ff;
}

.boxy {
border-style: ridge;
border-width: 10px;
border-color: #ffcc00;
}

CSS3 凸型邊框設計

CSS3 凸型邊框設計之程式與範例如下。

注意，因 css 通常不會把表格寬度寫死，所以通常以手動加入。實作程序如下：

〉表格

〉插入表格

設定：列1、欄1

在〈設計〉介面，以滑鼠點選，出現<table>標籤。

〉套用樣式

選擇 .boxb

到〈程式碼〉介面，加入 style 宣告。

<table id="table1" style="width: 400px;" class="boxb">
<tr>
<td><h5>藍色凸型邊框設計<span><br>Blue ridge borders design</span></h5></td>
</tr>
</table>

<table id="table3" style="width: 400px;" class="boxy">
<tr>
<td><h5>黃色凸型邊框設計<span><br>Yellow ridge borders design</span></h5></td>
</tr>
</table>

<table id="table2" style="width: 400px;" class="boxp">
<tr>
<td><h5>紫色凸型邊框設計<span><br>Purple ridge borders design</span></h5></td>
</tr>
</table>

其他 CSS3 邊框增益式設計

其他邊框增益式設計如以下連結。

CSS Borders

http://www.w3schools.com/css/css_border.asp

CSS border-style Property

http://www.w3schools.com/cssref/pr_border-style.asp

CSS border-color Property

http://www.w3schools.com/cssref/pr_border-color.asp 

CSS2 邊框增益式設計

在CSS2 時代，邊框增益式設計，統雄老師推薦的是：漸層式邊框設計 Gradient design of borders。

漸層式邊框設計 Gradient borders design

漸層式邊框設計又可以分作正向、和反向2種，程式碼與成果如下：

正向設計，使用 inset 指定色彩。

反向設計，使用 outset 指定色彩。

<table style="width: 400px; height: 0; border: 10px outset #00CCFF; " >
<tr>
<td>
<h5>反向漸層式邊框設計<br> Gradient borders outset design</h5>
</td>
</tr>
</table>