Select Page

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

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

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

WordPress Image Border

 

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

 
 

  • 使用的方法很容易,首先透過文字編輯器開啟子佈景主題的式樣檔(style.css),填入以下式樣設計。
  • .dashborder 選擇器可以自己定義,當然如果要對其他尺寸個別式樣設計也是可以在這裡做區隔。
  • outline 是框線設計,1px 指的是線的寬度,dashed 是虛線(實線是 solid),其他歸於線的式樣定義可以參閱 w3schools.com CSS Borders 的說明文件,#ffffff 是顏色設計。
  • outline-offset 是指定外框線邊距,這裡的效果是要做成內框線,所以它的數值是負數(-15px),可以根據自己的圖片大小做微調。outline 相關說明文件可以參考:CSS outline PropertyCSS3 outline-offset Property
  •  

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

    文章照片邊框式樣設計
    文章照片邊框式樣設計

     
     

    結論

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

    About The Author

    max

    使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

    Leave a reply

    你的電子郵件位址並不會被公開。 必要欄位標記為 *

    網站架設

    WordPress 專屬主機