琳達教學：如何自製部落格版型 簡易型小圖邊框
最近琳達的教學是以製作邊框為主
在上回的琳達教學：如何自製部落格版型 簡易型邊框
是運用一張蕾絲圖檔加上語法的運用而形成的邊框
今天是運用很小很小的圖檔來製成邊框
不需用到軟體，只要你有10px以下的圖檔
就可以有閃閃美麗會動的邊框喲~先來看看預覽圖
琳達專屬分線
辛苦的製作教學，希望你能正確引用
★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處：★Linda達令★
★本站文章巳申請註作權，請尊重他人正確引用
取琳達LOGO
教學分享
琳達專屬分線
教學開始囉~
首先琳達找了同色系的二個圖檔
and 
套置語法中就成了上圖框囉~
|
以下註解部份參考二度空間
調整解說 : (設定值以小圖的像素值為準，此語法是以 10X10px 像素值做基準，以半形顯示，如果小圖為透明圓形圖時，則顯示的圖框為波浪形)
.ycntmod .rctop {background:url(上邊框小圖檔網址) center top repeat-x;margin-right:3px;}
3px 此值設定上邊框靠左縮邊的像素值距離，在上邊框以橫向重複排列顯示
.ycntmod .rcbtm {background:url(下邊框小圖檔網址) center bottom repeat-x;margin-right:3px;}
3px 此值設定下邊框靠左縮邊的像素值距離，在下邊框以橫向重複排列顯示
.ycntmod .rctop div {background:url(右上角小圖網址) right top no-repeat;height:6px;}
6px 此值設定小圖右上角靠邊呈現的像素值，以單一小圖不重複顯示，同時影響上邊框靠邊的距離
.ycntmod .rcbtm div {background:url(右下角小圖網址) right bottom no-repeat;height:6px;}
6px 此值設定小圖右下角靠邊呈現的像素值，以單一小圖不重複顯示，同時影響下邊框靠邊的距離
.ycntmod .rcl {padding-left:6px;background:url(左邊框小圖網址) left repeat-y;}
6px 此值設定小圖靠邊呈現的像素值距離，在左邊框以縱向重複排列顯示
.ycntmod .rcr {padding-right:6px;background:url(右邊框小圖網址) right repeat-y;}
6px 此值設定小圖靠邊呈現的像素值距離，在右邊框以縱向重複排列顯示
若要顯示透明度，可加入下列語法
{zoom:1; filter:alpha(opacity:100)}
opacity 透明度調整 0~100 ；0 為透明
預覽及範例語法(圖檔不同可微調數值)
使用 and 圖檔製成 |
/*Linda簡易型小圖組合邊框*/ .ycntmod .rctop {background:url(http://img17.imageshack.us/img17/733/linda37a031.gif) center top repeat-x;margin-right:5px;} .ycntmod .rcbtm {background:url(http://img17.imageshack.us/img17/733/linda37a031.gif) center bottom repeat-x;margin-right:5px;} .ycntmod .rctop div {background:url(http://img17.imageshack.us/img17/733/linda37a031.gif) right top no-repeat;height:11px;} .ycntmod .rcbtm div {background:url(http://img17.imageshack.us/img17/733/linda37a031.gif) right bottom no-repeat;height:11px;} .ycntmod .rcl {padding-left:5px;background:url(http://img14.imageshack.us/img14/8691/linda37a03.gif) left repeat-y;} .ycntmod .rcr {padding-right:5px;background:url(http://img14.imageshack.us/img14/8691/linda37a03.gif) right repeat-y;} |
使用四個圖檔製成      |
/*Linda簡易型小圖組合邊框*/ .ycntmod .rctop {background:url(http://img13.imageshack.us/img13/4397/linda37a05.gif) center top repeat-x;margin-right:6px;} .ycntmod .rcbtm {background:url(http://img13.imageshack.us/img13/4397/linda37a05.gif) center bottom repeat-x;margin-right:1px;} .ycntmod .rctop div {background:url(http://img16.imageshack.us/img16/4052/linda37a07.gif) right top no-repeat;height:9px;} .ycntmod .rcbtm div {background:url(http://img15.imageshack.us/img15/6880/linda37a06.gif) right bottom no-repeat;height:12px;} .ycntmod .rcl {padding-left:4px;background:url(http://img15.imageshack.us/img15/8953/linda37a04.gif) left repeat-y;} .ycntmod .rcr {padding-right:4px;background:url(http://img15.imageshack.us/img15/8953/linda37a04.gif) right repeat-y;} |
希望您會喜歡此教學喲~
