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

2009040301:27

 

 

簡易套框方法不用剪裁只要上傳就可以囉^^超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;}


成果展示:

哇!這下變成阿花花溜^^


 ps:靜態圖動態圖只要喜歡的圖都可拿來當框圖

簡單的加框語法套用,想要什麼圖框就是什麼框,真的很簡單^^

閃圖分享^^這是從大家那分享的,我再集合上傳

若您一時找不到圖,可以拿這裡的去用喔

每個圖示下方都有檔名,只要將檔名加到網址的檔名處就是完整網址了

http://s298.photobucket.com/albums/mm253/200863/Frame/0614/加入檔名

祝您們玩的愉快^^

天天開心唷^^

玄音 合十\2008.06.14

框圖教學及面版框圖分享總列表^^