| /*部落格捲軸顏色網頁加框*/ html{ SCROLLBAR-FACE-COLOR:#ffffff; SCROLLBAR-HIGHLIGHT-COLOR:#b0ddff; SCROLLBAR-SHADOW-COLOR:#b0ddff; SCROLLBAR-3DLIGHT-COLOR:#ffffff; SCROLLBAR-DARKSHADOW-COLOR: #b0ddff; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; border-right: 18px dashed; border-top: 9px dashed; border-left: 18px dashed; border-bottom: 9px dashed; border-color: #FFCCFF;} a:hover{border: 2px #fff outset}
|
語法說明：
卷軸語法
html{
SCROLLBAR-FACE-COLOR: #FFFFFF; ←[白色] 長條捲軸顏色
SCROLLBAR-HIGHLIGHT-COLOR:FFFFFF; ←[白色]捲軸 明亮色
SCROLLBAR-SHADOW-COLOR: FFFFFF; ←[白色] 捲軸陰暗色
SCROLLBAR-3DLIGHT-COLOR:#E0E0E0; ←[灰色] 長條捲軸內框線
SCROLLBAR-DARKSHADOW-COLOR: #E0E0E0; ←[灰色] 長條捲軸外框線
SCROLLBAR-ARROW-COLOR: #FF0033; ←[灰色] 三角箭頭顏色
SCROLLBAR-TRACK-COLOR:#000000 ; } ←[黑色] 長條捲軸軌道背景色
body {border: 5px double #ff0000 ;} ←[紅色] 框住部落格大框框
部落格網頁框語法
border-right: 18px dashed;--右邊框線寬度
border-top: 9px dashed;--上方框線寬度
border-left: 18px dashed;--左邊框線寬度
border-bottom: 9px dashed;--下方框線寬度
border-color: #FFCCFF;} --框線色彩
a:hover{border: 2px #fff outset}--框住整各部落格大框線
314測試心得：
曾試著將 卷軸 和 網頁大框線 語法分開使用 就造成語法失敗
所以在使用此語法時請注意 在CSS語法中是否有同樣的捲軸語法並存
使用說明：
進入 管理部落格 → 面板設定 →自訂樣式 → 貼上 部落格捲軸顏色網頁加框 語法
如果 語法 無法呈現 效果
請檢查 CSS 語法
請先點選CSS欄中空白處 →按 Ctrl+F 搜尋可有相同開頭的語法或 卷軸語法
語法中有相同的 開頭語法
請覆蓋 或刪除此相同語法，才不會造成語法衝突
此語法 參考 湘雲娘子部落格的CSS語法擷取製作教學
http://tw.myblog.yahoo.com/awu-238262005/
範例網↓湘雲娘子部落格
http://tw.myblog.yahoo.com/awu-238262005/profile
===========================================
下載：藍線框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》千金公主寶貝窩
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語法 貼上 →建議你先 複製 存檔
→儲存→看結果
留言列表
