首先用Ulead GIF Animator5軟體，將原圖切割成６塊，再將第１塊、第３塊圖片的寬度延長，
然後將各圖片網址寫成邊框語法，加在CSS樣式表裡就完成了。
框線圖位址放置排列：
|
/*shared rounded corner for all modules加框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(1.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(2.gif) right top no-repeat;height:1.gif高px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(3.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(4.gif) right bottom no-repeat;height:3.gif高px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5.gif寬px;background:url(5.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:6.gif寬px;background:url(6.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
|
瞭解了嗎？很簡單吧!!?
我再重述一下製作流程，依續是：
(可點選流程說明,觀看製作方式)
流程１）找一張原圖
流程２）將原圖切成６塊
流程３）把第１、３塊圖片的寬度加長
流程４）將６塊圖片上傳至免費空間
流程５）將６塊圖片網址套用在加框語法裡
流程６）將語法貼在部落格〔面版設定>自訂樣式〕裡
