研究了一下發現邊線藝術在網頁的應用很有困難。一個網頁要吸引人，最好是找一些美美的照片作為素材，邊線藝術的作品可能有點差距。但是邊線圖案有一個優點就是省空間。例如下面範例的這張圖，我用 print-screen 拷貝到小畫家；清除多餘的只保留邊線圖，然後以不同檔案格式存檔。下面是不同圖檔格式的檔案大小。
- 24 bit BMP 檔：585 KB。
- GIF 檔：4.38 KB。存檔時顏色略有失真。
- JPEG 檔：7.9 KB。存檔時顏色失真。
- PNG 檔：6.54 KB。
- TIFF 檔：24.2 KB。
- 邊線藝術文字檔：457 Bytes。
由上面數據可知，產生下面邊線圖的文字總共是 457 Bytes，這是 PNG 圖檔的十分之一；這可以省下不少通信費。事實上這些文字在傳輸前還會壓縮的更小。所以在吸引網友的美美圖片與通信費之間，你常常須要作出取捨；而有些情況下，邊線圖也許是最好的選擇。
- 風格用法：
<style type="text/css">
.box {position:relative;
width:500px;
height:400px;
}
.box .pic
{position:absolute;
border-width:200px 250px;
border-color:blue green;
border-style:solid;
width:0px; height:0;
line-height:0;
}
.box .text
{position:absolute;
top:0; left:0;
}
</style>
<div class=box>
<div class=pic>
</div>
<div class=text>
<!--文章就放這裡-->
</div>
</div> - 執行結果：
背景圖的顏色必須與文字顏色有對比，否則看的很費眼力。下例的檔案大小 PNG 檔 7.99 KB，文字檔 1.65 KB。下例中，IE6 需要在 .brick 加入 font-size:0px，否則會失準。
- 風格用法：
<style type="text/css">
.box {position:relative;
width:500px;
height:400px;
}
.box .pic
{position:absolute;
border-width:200px 250px;
border-color:#339 #393;
border-style:solid;
width:0px; height:0;
line-height:0;
}
.box .brick
{height:20px;
font-size:0px;
line-height:0px;
margin:0px;
padding:0px;
background:transparent;
border:solid 0px #933;
border-left-width:20px;
border-right-width:20px;
margin:0px auto;
}
.box .text
{position:absolute;
top:0; left:0;
}
</style>
<div class=box>
<div class=pic></div>
<div style='position:relative'>
<div class=brick style='width:460px'></div>
<div class=brick style='width:420px'></div>
<div class=brick style='width:380px'></div>
<div class=brick style='width:340px'></div>
<div class=brick style='width:300px'></div>
<div class=brick style='width:260px'></div>
<div class=brick style='width:220px'></div>
<div class=brick style='width:180px'></div>
<div class=brick style='width:140px'></div>
<div class=brick style='width:140px;background:red;border-width:0px 60px'></div>
<div class=brick style='width:140px;background:red;border-width:0px 60px'></div>
<div class=brick style='width:140px'></div>
<div class=brick style='width:180px'></div>
<div class=brick style='width:220px'></div>
<div class=brick style='width:260px'></div>
<div class=brick style='width:300px'></div>
<div class=brick style='width:340px'></div>
<div class=brick style='width:380px'></div>
<div class=brick style='width:420px'></div>
<div class=brick style='width:460px'></div>
</div>
<div class=text>
文章就放這裡
</div>
</div> - 執行結果：
文章就放這裡
黃金峽谷。下例的檔案大小 PNG 檔 17 KB，邊線圖的文字檔（未壓縮）2.84 KB。
- 風格用法：
<style type="text/css">
.valley
{width:500px;
height:400px;
background:green;
}
.valley .mountainl
{font-size:0px;
line-height:0px;
margin:0px;
padding:0px;
border:solid 10px green;
border-left:solid 20px gold;
border-right-width:0;
float:left; clear:left;
}
.valley .mountainr
{font-size:0px;
line-height:0px;
margin:0px;
padding:0px;
border:solid 10px green;
border-right:solid 20px gold;
border-left-width:0;
float:right; clear:right;
}
</style>
<div class=valley>
<div class=mountainl></div>
<div class=mountainr></div>
<div class=mountainl style='border-left-width:40px'></div>
<div class=mountainr style='border-right-width:40px'></div>
<div class=mountainl style='border-left-width:60px'></div>
<div class=mountainr style='border-right-width:60px'></div>
<div class=mountainl style='border-left-width:80px'></div>
<div class=mountainr style='border-right-width:80px'></div>
<div class=mountainl style='border-left-width:100px'></div>
<div class=mountainr style='border-right-width:100px'></div>
<div class=mountainl style='border-left-width:120px'></div>
<div class=mountainr style='border-right-width:120px'></div>
<div class=mountainl style='border-left-width:140px'></div>
<div class=mountainr style='border-right-width:140px'></div>
<div class=mountainl style='border-left-width:160px'></div>
<div class=mountainr style='border-right-width:160px'></div>
<div class=mountainl style='border-left-width:180px'></div>
<div class=mountainr style='border-right-width:180px'></div>
<div class=mountainl style='border-left-width:200px'></div>
<div class=mountainr style='border-right-width:200px'></div>
<div class=mountainl style='border-left-width:200px'></div>
<div class=mountainr style='border-right-width:200px'></div>
<div class=mountainl style='border-left-width:180px'></div>
<div class=mountainr style='border-right-width:180px'></div>
<div class=mountainl style='border-left-width:160px'></div>
<div class=mountainr style='border-right-width:160px'></div>
<div class=mountainl style='border-left-width:140px'></div>
<div class=mountainr style='border-right-width:140px'></div>
<div class=mountainl style='border-left-width:120px'></div>
<div class=mountainr style='border-right-width:120px'></div>
<div class=mountainl style='border-left-width:100px'></div>
<div class=mountainr style='border-right-width:100px'></div>
<div class=mountainl style='border-left-width:80px'></div>
<div class=mountainr style='border-right-width:80px'></div>
<div class=mountainl style='border-left-width:60px'></div>
<div class=mountainr style='border-right-width:60px'></div>
<div class=mountainl style='border-left-width:40px'></div>
<div class=mountainr style='border-right-width:40px'></div>
<div class=mountainl></div>
<div class=mountainr></div>
研究了一下發現邊線藝術在網頁的應用很有困難。一個網頁要吸引人，最好是找一些美美的照片作為素材，邊線藝術的作品可能有點差距。但是邊線圖案有一個優點就是省空間。例如下面範例的這張圖，我用 print-screen 拷貝到小畫家；清除多餘的只保留邊線圖，然後以不同檔案格式存檔。下面是不同圖檔格式的檔案大小。
</div> - 執行結果：
研究了一下發現邊線藝術在網頁的應用很有困難。一個網頁要吸引人，最好是找一些美美的照片作為素材，邊線藝術的作品可能有點差距。但是邊線圖案有一個優點就是省空間。例如下面範例的這張圖，我用 print-screen 拷貝到小畫家；清除多餘的只保留邊線圖，然後以不同檔案格式存檔。下面是不同圖檔格式的檔案大小。
