WordPress Image Border – 照片邊框式樣設計

max

7 年前

架設 WordPress 網站內容中，圖片是很重要的一個因素，適當的圖片可以讓網站文章內容更容易讓訪客接受，提升閱讀效果，當然就會增加網站的流量。所以有很多網站在圖片的是樣上做了很多設計，在這裡也跟大家分享過很多相關的外掛程式與式樣設計文章，今天分享的是一個很簡單的式樣（CSS）技巧，不過卻可以讓照片活潑起來，有興趣的朋友也可以試試。

WordPress Image Border

WordPress Image Border – 照片邊框式樣設計

使用的方法很容易，首先透過文字編輯器開啟子佈景主題的式樣檔（style.css），填入以下式樣設計。

.dashborder 選擇器可以自己定義，當然如果要對其他尺寸個別式樣設計也是可以在這裡做區隔。

outline 是框線設計，1px 指的是線的寬度，dashed 是虛線（實線是 solid），其他歸於線的式樣定義可以參閱 w3schools.com CSS Borders 的說明文件，#ffffff 是顏色設計。

outline-offset 是指定外框線邊距，這裡的效果是要做成內框線，所以它的數值是負數（-15px），可以根據自己的圖片大小做微調。outline 相關說明文件可以參考：CSS outline Property 與 CSS3 outline-offset Property。

.dashborder {
    outline: 1px dashed #ffffff;
    outline-offset: -15px;
}

.dashborder {

outline: 1px dashed #ffffff;

outline-offset: -15px;

}

接著在文章照片編輯時切換到文字編輯模式，為照片加上式樣選擇器設定，這樣就完成照片的式樣設計了。

文章照片邊框式樣設計

結論

這個簡單的式樣技巧，不會增加載入的效能，可以輕鬆的根據 border 屬性做出不同變化，讓照片的展示出現不同的效果，很適合初學者學習參考的式樣技巧，當然也歡迎其他朋友如果願意跟我們分享類似的照片式樣技巧。