自製圖片外框式樣

在文章中插入圖片，感覺上文章的可看度就提升了不少，但是如果你的佈景主題對圖片沒有作式樣的設計，那麼圖片看起來就比較死板，就像說明一的圖片一樣。 max 今天跟大家分享一個簡單的方法，不需要更改佈景主題式樣檔裡面的設計，只需要在編輯文章插入圖片時加上一些式樣的語法，可以讓圖片馬上有不一樣的效果（說明四圖片所呈現的效果）。

使用的方法單說明如下：

1. 準備在文章中使用的圖片一張（範例圖片）。

（範例圖片）↗

2. 準備跟說明一圖片大小相同的外框式樣圖片一張，請準備gif格式去除底色（外框式樣圖片）。

（外框式樣圖片）↗

3. 在撰寫文章時，切換到程式碼模式，編寫圖片的語法如下：
<img src="http://www.yourdomain.com/外框式樣圖片.gif" style="background: url(http://www.yourdomain.com/範例圖片.jpg) no-repeat">

4. 以上完成，呈現的圖片效果如下，有興趣的朋友可以試試看變化出其他不同的效果。

（圖片含有外框式樣的樣子）↗