框線圖案置換語法
此語法是參考小小羊兒教學文
http://tw.myblog.yahoo.com/jw!CSu5DHmBERyjmtIvo6vbZbKOn7L3dQ--/
↓
CSS中 框線圖案的語法解說，解說線條位置尺寸：
|
/*Shared rounded corner for all modules框線圖案*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(文章左上角和上方圖檔網址 線條尺寸984x15) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(文章右上角圖檔網址線條尺寸18x20或無框線) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(文章左下角和下方圖檔網址線條尺寸984x15) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(文章右下角圖檔網址線條尺寸18x20或無框線) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(文章直左邊條圖檔網址線條尺寸10x30) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(文章直右邊條圖檔網址線條尺寸10x30) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
|
↓CSS中 框線圖案的語法：
|
/*Shared rounded corner for all modules框線圖案*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://左上線條圖片網址.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(http://右上線條圖片網址.gif) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://左下線條圖片網址.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://右下線條圖片網址.gif) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(http://左邊線條圖片網址.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(http://右邊線條圖片網址.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
|
圖片必須是放置在網路空間的圖片
不行用自己電腦內的圖片
不行用各部落格相簿內的圖片
需上傳圖片請參考
免費上傳圖片網教學
http://tw.myblog.yahoo.com/monkey_014148/article?mid=669
小小羊兒 超可愛的框線樣圖
314臨時製作的框線樣圖
想要有美麗可愛完美的框線 是需要時間來製作
想要去除框線
請用無框線語法：
|
/*Shared rounded corner for all modules無框線圖案*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url() repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
|
延伸說明(引用《甜蜜♥Lover》所做的整理表格：
參考下列表格 可以依照自己需求編寫CSS語法
《甜蜜♥Lover》千金公主寶貝窩
http://tw.myblog.yahoo.com/jw!844BCHmZBxjs7onFX0_pm7Bp/article?mid=1441
＊欄位框線圖
語法說明：
| /*主題*/ |
內容標題 |
{常用修改樣式} |
| /*Shared rounded corner for all modules欄位框線圖*/ |
.ycntmod .rctop
(框線左上角) |
background:url(http://圖檔網址.gif) left top no-repeat(左上框線圖檔)
margin-right:8px(右邊位移數值) |
.ycntmod .rctop div
(框線右上角) |
background:url(http://圖檔網址.gif) right top no-repeat(右上框線圖檔)
height:30px (上方圖檔高度)
right:8px(圖檔位移數值) |
.ycntmod .rcl
(框線左直線) |
background:url(http://圖檔網址.gif) repeat-y(左直框線圖檔) |
.ycntmod .rcr
(框線右直線) |
background:url(http://圖檔網址.gif) right repeat-y(右直框線圖檔) |
.ycntmod .rcbtm
(框線左下角) |
background:url(http://圖檔網址.gif) left bottom no-repeat(左下框線圖檔)
margin-right:8px(右邊位移數值) |
.ycntmod .rcbtm div
(框線右下角) |
background:url(http://圖檔網址.gif) right bottom no-repeat(右下框線圖檔)
height:30px (上方圖檔高度)
right:8px(圖檔位移數值) |
範例：
/*Shared rounded corner for all modules欄位框線圖*/
.ycntmod .rctop{background:url(http://左上圖檔網址.gif) left top no-repeat;margin-right:20px}
.ycntmod .rctop div{background:url(http://右上圖檔網址.gif) right top no-repeat;height:20px;right:-20px}
.ycntmod .rcl{background:url(http://左直圖檔網址.gif) repeat-y}
.ycntmod .rcr{background:url(http://右直圖檔網址.gif) right repeat-y}
.ycntmod .rcbtm {zoom:1;background:url(http://左下圖檔網址.gif) left bottom no-repeat;margin-right:20px}
.ycntmod .rcbtm div {background:url(http://右下圖檔網址.gif) right bottom no-repeat;height:20px;right:-20px}
註：左右窄欄位的預設寬度為width:140px，設定為120px較不會影響框線
語法使用：
進入 管理部落格-面版設定-自訂樣式
將語法 貼在 CSS 語法中
