網頁邊框設計與邊框增益式屬性

Tables Multifunction 多功能表格 Table Design 網頁表格CSS設計 Contents/Index Design 目錄設計 <caption><th> 表格欄位標題設計 網頁表格設計CSS程式碼範例 表格與文字互轉 表格 css 意外錯亂 <tbody> 跨頁表格設計 Text Box 插欄設計 Invisible Columns 多欄版面設計 網頁表格屬性背景圖片設計 CSS3 邊框增益式設計 設計使用者 class CSS3 凸型邊框設計 Gradient design of borders 漸層式邊框設計 Objects Integration 物件整合 Wrap 盤文-文繞框設計 Asymmetrical Design 非對稱設計 The width of cells- NBSP string 細格內寬度控制 Creative Design 創意版面設計 雙色表格 :nth-child() 應用 Vertical Title 直題設計 Questionnaires 問卷設計

圖文框設計:表格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>