框線設定法 @ ajohnwoung的部落格

框線設定法

分類：網誌-css區

2006/08/23 01:37

Facebook Plurk YAHOO!

如下圖部落格框線：

下載：藍線框CSS範本

資料參考：

感謝 ღ 鬼系〃涼咩咩‵ 提供：

http://tw.myblog.yahoo.com/every-time/article?mid=1537#1613

語法說明：↓

框線設定

..................

奇摩部落格-框線分類：

/*Opacity for sub column左右欄框線*/

/*Opacity for blogtitle上橫框框線*/

/*Opacity for main content文章區框線*/

/*部落格大框線*/
body {border: 5px double #0033FF ;}

...................

框線語法：

/*Opacity for blogtitle上橫框框線*/
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:77)
border-bottom:3px double #0033FF ;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF }

/*Opacity for sub column左右欄框線*/
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:79)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}

/*Opacity for main content文章區框線*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:78)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}

/*部落格大框線*/
body {border: 5px double #0033FF ;}

藍色-改色碼 ←color:#904E0E

色碼表查詢

opacity:100 ←不透明

opacity:0 ←透明

1px為外框的厚度，數值越大寬度越大，可自行設定。

設成0px則可消除外框

doubled可改為下列不同樣式的外框

solid(實心線)

dotted(點)

dashed(短線)

double(雙實線)

立體效果：

groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)

..............................

延伸說明(引用《甜蜜♥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 內

建議你先複製存檔

管理部落格 → 選面板設定→ 選自訂樣式

將你的css語法貼上 →建議你先複製存檔

→儲存→看結果