
網頁邊框設計與邊框增益式屬性
表格 /
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 指定色彩。
<table style="width: 400px; height: 0; border: 10px inset #00CCFF; " ><tr>
<td>
<h5>漸層式邊框設計<br> Gradient borders inset design</h5>
</td>
</tr>
</table>
漸層式邊框設計 |
反向設計,使用 outset 指定色彩。
<table style="width: 400px; height: 0; border: 10px outset
#00CCFF; " >
<tr>
<td>
<h5>反向漸層式邊框設計<br> Gradient borders
outset design</h5>
</td>
</tr>
</table>
反向漸層式邊框設計 |




