簡易套框方法不用剪裁只要上傳就可以囉^^超Easy~－培迪的痞客邦部落格

簡易套框方法不用剪裁只要上傳就可以囉^^超Easy~

若您就是喜歡簡單的框圖，那麼這個方法，絕對讓您套的眉開眼笑^^

因為格友 ~娜~ 的一種想法，讓我想到了這個簡易框線圖套用，真的很簡單，

不用裁剪，只要把喜歡的閃圖或任何圖片上傳到空間，取得網址，

套在加框語法的六邊框圖址裡，就是一組美美的框圖了。

簡單套框語法：

/*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;}