為文章中圖片製作動態框線效果

圖文並茂的文章通常能有加分效果, 如果再配個動態框線, 就更能讓圖片出色了!這個動態框線及濾鏡效果, 是只有滑鼠移到文章中的圖片上方時, 才會發生. 只需要一段CSS程式碼, 就可以套用所有文章內的圖片.




做了幾種效果的截圖如下, 並附上相對應的程式碼.(不過在IE及Firefox下的瀏覽效果仍有些不同)

在 blogger/blogspot 的範本-->修改HTML, 在<b:skin><![CDATA[ 及 ]]></b:skin> 之間, 加入或修改成以下程式碼.(小提醒: 由於我也加入了框線設定, 如果要觀賞效果, 滑鼠先不要移到圖片上方, 否則會被我的設定干擾, 反而更看不清楚哦!)

如果不是blogger使用者, 也可參考 { } 內的程式碼. 其中border(框線厚度),border 及 background 的顏色都可以自訂.如果不需要濾鏡效果 filter及opacity, 可以移除.

1. dotted 後的效果
.post img:hover {
border:1px dotted #838b8b ;
background:#838b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



2. dashed
.post img:hover {
border:1px dashed #838b8b ;
background:#838b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



3.dashed 及框線加粗
.post img:hover {
border:2px dashed #8b864e ;
background:#8b864e ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



4.outset及框線加粗
.post img:hover {
border:2px outset #607b8b ;
background:#607b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}


相關文章 :