CSS邊框教學
～框線(邊)圖會陸續增加中～這些做好的先貼出來～大家分享～
～有喜歡的，就帶回家喔～歡迎複製引用～資源共享～
PS：這些線框是參考 
魔女音符 的 招呼語用ㄉ動畫框--二 ，改製的喔。
相關文章 
| 2007框圖及游標圖分享 | ||
| 聖誕框圖及寵物框圖分享 | 動畫框線圖教學上篇 | 動畫框線圖教學下篇 |
| 自製框線圖及語法分享 | 靜態框圖教學及語法應用 | 靜態框線圖教學 |
|
框線圖及語法分享示範 | |
| 圖示↓ |
語法↓ |
95.10.29新增 |
/*shared rounded corner for all modules閃麗小花框線圖加框語法*/ /*shared rounded corner for all modules閃麗小花框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/h01.gif) left top no-repeat;margin-right:15px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/h02.gif) right top no-repeat;height:30px;font-size:0;position:relative;right:-15px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/h03.gif) left bottom no-repeat;margin-right:15px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/h04-1.gif) right bottom no-repeat;height:32px;font-size:0;position:relative;right:-15px;} .ycntmod .rcl {padding-left:13px;background:url(http://hk.geocities.com/ccloud67tw/Table/h05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:20px;background:url(http://hk.geocities.com/ccloud67tw/Table/h06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules紅圓框邊線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/a01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/a02.gif) right top no-repeat;height:9px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/a03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/a04.gif) right bottom no-repeat;height:9px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:8px;background:url(http://hk.geocities.com/ccloud67tw/Table/a05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:9px;background:url(http://hk.geocities.com/ccloud67tw/Table/a06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules彩虹小娃娃框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/aa1.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/aa2.gif) right top no-repeat;height:46px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/aa3.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/aa4.gif) right bottom no-repeat;height:12px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:13px;background:url(http://hk.geocities.com/ccloud67tw/Table/aa5.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:12px;background:url(http://hk.geocities.com/ccloud67tw/Table/aa6.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modulesKikity框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/b01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/b02.gif) right top no-repeat;height:45px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/b03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/b04.gif) right bottom no-repeat;height:9px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:8px;background:url(http://hk.geocities.com/ccloud67tw/Table/b05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:9px;background:url(http://hk.geocities.com/ccloud67tw/Table/b06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
|
|
/*shared rounded corner for all modules褐小花愛心框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/c01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/c02.gif) right top no-repeat;height:35px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/c03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/c04.gif) right bottom no-repeat;height:33px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:18px;background:url(http://hk.geocities.com/ccloud67tw/Table/c05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:18px;background:url(http://hk.geocities.com/ccloud67tw/Table/c06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules可愛小雞D框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/d01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/d02.gif) right top no-repeat;height:26px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/d03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/d04.gif) right bottom no-repeat;height:13px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:15px;background:url(http://hk.geocities.com/ccloud67tw/Table/d05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:16px;background:url(http://hk.geocities.com/ccloud67tw/Table/d06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules可愛小雞E框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/e01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/e02.gif) right top no-repeat;height:38px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/e03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/e04.gif) right bottom no-repeat;height:13px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:15px;background:url(http://hk.geocities.com/ccloud67tw/Table/e05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:16px;background:url(http://hk.geocities.com/ccloud67tw/Table/e06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules紫色welcome噗噗框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/f01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/f02.gif) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/f03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/f04.gif) right bottom no-repeat;height:16px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:12px;background:url(http://hk.geocities.com/ccloud67tw/Table/f05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:13px;background:url(http://hk.geocities.com/ccloud67tw/Table/f06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
|
| |
 |
/*shared rounded corner for all modules彩虹小娃娃框線圖加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/g01.gif) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/g02.gif) right top no-repeat;height:46px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/g03.gif) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/g04.gif) right bottom no-repeat;height:12px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:13px;background:url(http://hk.geocities.com/ccloud67tw/Table/g05.gif) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:12px;background:url(http://hk.geocities.com/ccloud67tw/Table/g06.gif) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} |
全站熱搜
留言列表
