ω。艾媽の手作 Mapin-cloth 小舖。ω

引用自＂凱西西＂

目前我的Ｂｌｏｇ邊框是長這樣

邊框的CSS語法是這樣寫的：

/*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:32px;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:2px;background:url(左邊框) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:2px;background:url(右邊框) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

語法說明：
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
　position:relative，指的是以每個物件左上角為基準點的相對位置；它有另一組語法，是position:absolute，指的是以每個網頁的左上角為基準點的相對位置。
　margin-bottom:10px，指的是物件和物件之間的距離，是從物件下方開始算的，我這邊設定的是10px，這個數字你可以更改，主要是看你的邊框大小去調整。
　overflow，指的是捲軸，因為我們的框架不需要捲軸，所以指令是下hidden

.ycntmod .rctop {zoom:1;background:url(左上角+上邊框) left top no-repeat;margin-right:5px;}
　這是上邊框的語法。
　※因為是用CSS編寫邊框，和table不同，所以要先把左上角和上邊框用photoshop之類的軟體把2張圖縫在一起，並把邊框拉長為1000px左右後存起來。（下邊框也是）
　"左上角+上邊框" = 你縫好並上傳的圖檔連結
　left top no-repeat，背景圖片靠右靠上，並且不重覆
　margin-right，該背景圖片(左上角+上邊框）和右邊的距離，基本上，不管你的右邊框圖片寬度是多少，都不用去修改5px那個數字，因為完全不會影響。

.ycntmod .rctop div {background:url(右上角) right top no-repeat;height:32px;font-size:0;position:relative;right:-5px;}
　這是邊框的右上角的語法。
　height:32px，這是指你圖片的高度，如果你上邊框圖片高度和我一樣是32px,你就設32，圖片高度不同，數字就跟著變就對了。
　right:-5px，因為上邊框已經有設定和右邊相距5px，所以這邊也要設定和右邊相距-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:2px;background:url(左邊框) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:2px;background:url(右邊框) right repeat-y;}
　分別為左邊框和右邊框的語法。
　padding-left:2px；padding-right:2px，指的是框裡的東西和邊框之間的距離，這個我自己有調過，我喜歡近一點，所以我設2px，如果你喜歡遠一些，可以調成5px或8px之類的。
　repeat-y，因為是css語法，所以可以指定背景圖片的表現方式，因為是左右邊框，所以只有重覆直向，所以指定為"y"，如果你改成x，就會變成橫向重覆。

.ycntmod .text {position:relative;word-break:break-all;}
　這是關於框架裡文字呈現的語法。
　word-break，指的是文字斷行，break-all，是只允許中文字斷字，基本上不用改。

如果啊，你們在url()的刮弧裡都沒有填寫任何語法時，奇摩原來設定的邊框就會跟著消失了。只要你顏色配的好，沒有邊框的blog我覺得也蠻好看的。

另外，有人會問我鴨子的邊框是去哪裡找到的，詳情請看這篇文章，看完後，在最下面的留言裡就有說到了，因為是日文網站，想找邊框，請連到該網站的「テーブル」資料夾就會看到了。

http://tw.myblog.yahoo.com/jw!o7utoSGYGRlbd2tVyPdIm.5D/article?mid=1300