|
簡單套框語法：
/*Shared rounded corner for all modules 簡單套框閃銀*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(圖片網址) left top repeat-x;margin-right:5px;}
.ycntmod .rctop div {background:url(圖片網址) right top no-repeat;height:1px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(圖片網址) left bottom repeat-x;margin-right:5px;}
.ycntmod .rcbtm div {background:url(圖片網址) right bottom no-repeat;height:1px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:1px;background:url(圖片網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:1px;background:url(圖片網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
範例 1：閃圖↓當框圖
圖址：http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif
作法：只要將閃圖網址套入語法中就好，其中不用更改，
六個圖片網址都相同也可套用不同閃圖址，
每邊都不一樣也行，只要您高興就好^^
示範：將套好圖址的簡框語法複製，貼到CSS最下面就可以了。
/*Shared rounded corner for all modules 簡單套框閃銀*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) left top repeat-x;margin-right:5px;}
.ycntmod .rctop div {background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) right top no-repeat;height:1px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) left bottom repeat-x;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) right bottom no-repeat;height:1px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:1px;background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:1px;background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
成果展示：
範例 2：加寬欄邊↓
若是覺得欄寬 1太細，還可以將寬度加大^^
作法：簡框語法中有紅色 height:1px 跟藍色 left:1px 指令，
把它們更改成您想要的欄寬大小就可以了。
示範：我將它們都改成 5px ; 5px，而且每個邊都不同閃圖喔^^
    
/*Shared rounded corner for all modules 簡單套框阿花花^^*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://s305.photobucket.com/albums/nn240/zz20080529/2008/0529/001.gif) left top repeat-x;margin-right:5px;}
.ycntmod .rctop div {background:url(http://i298.photobucket.com/albums/mm253/200863/Frame/0614/26.gif) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://i298.photobucket.com/albums/mm253/200863/Frame/0614/amethyst.gif) left bottom repeat-x;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://i298.photobucket.com/albums/mm253/200863/Frame/0614/blackheartglitter02_tlg.gif) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(http://i298.photobucket.com/albums/mm253/200863/Frame/0614/aquamarine.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(http://i298.photobucket.com/albums/mm253/200863/Frame/0614/bordure.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
成果展示：
哇！這下變成阿花花溜^^
ps：靜態圖動態圖只要喜歡的圖都可拿來當框圖
簡單的加框語法套用，想要什麼圖框就是什麼框，真的很簡單^^
閃圖分享^^這是從大家那分享的，我再集合上傳
若您一時找不到圖，可以拿這裡的去用喔
每個圖示下方都有檔名，只要將檔名加到網址的檔名處就是完整網址了
↓
http://s298.photobucket.com/albums/mm253/200863/Frame/0614/加入檔名
祝您們玩的愉快^^
天天開心唷^^
玄音 合十＼2008.06.14
| 
