動手 DIY - 透過 CSS 簡單的為圖片加上陰影效果

由於網站本身大多都是白色的底,而圖片有白色的部分,就會造成難界定哪邊是圖片哪邊是文章區塊,這時候可以透過簡單的為圖片加上邊框,像是陰影效果,這時候只要簡單加上幾行 CSS 設定,還能幫圖片加上圓角等效果。

加上陰影效果之前

加上陰影效果之後

陰影與圓角

效果要如何加上呢?在前臺點擊上方的『自訂』,再點入『附加的 CSS』,這時候就能開始增加需要的 CSS 語法。

語法於下方

陰影

陰影+圓角

學習新知:

WordPress CSS 語法中像是上方的兩個示範在 img 前方有加上 .single 這就代表只套用在單篇文章,在文章首頁或是頁面中不套用,若想要整個站套用可以透過移除 .single 只設定 img 就好。

首頁 .home
單篇文章 .single
單篇頁面 .page
分類頁面 .category

延伸閱讀:

CSS 圓角簡單說明:CSS3 圓角 border-radius
CSS 陰影效果說明:CSS3 box-shadow 属性

cras4202tw
字媒體工程師 更多關於我