Facebook加入
LINE加入
2021/12/25
部落格已經風行多年，筆者使用過奇摩的部落格、Blogger、痞客邦，到最後選擇 wordpress ，剛開始使用NAS架設，頻寬與管理問題接踵而來，最後租用虛擬主機架設WordPress，然而文章中的圖片可以讓網站更多采多姿，提升訪客閱讀效果，以達增加網站的流量。因此許多網站會在圖片上的外框動些手腳，讓圖文並茂的閱讀介面更清爽舒適，當然這類外掛程式不少，不過此文使用簡單的 CSS 技巧，讓圖片更活潑有趣。
圖片邊框是最常使用的效果之一，方法很簡單，就是先透過文字編輯器開啟佈景主題的式樣檔（style.css）填入CSS語法，較新的佈景主題都有支援自訂CSS的方式，下圖是筆者使用的佈景主題來選擇自訂的「附加CSS」功能。
進入編輯CSS的畫面，輸入紅色框內的文字，「.it-shadow-03」是一個新的類別定義，「.」字元後面是類別名稱，儘量輸入好記得用詞。「border-radius: 6px」是圓角的弧度指定，數值越大弧度越大，筆者使用6px。「border: 1px solid #ddd」是邊框粗細與線條樣式，邊框線條筆者指定ipx，數值越大當然越粗；而soid 表示實體線（dotted 則會變虛線）；#ddd 則是線的顏色代碼（可參考這裡）。
在編輯區上點選圖片出現圖示選單，選擇紅色框內的編輯圖示。
接著我們為圖片的 CSS 類別設定一個定義過的類別名稱，如筆者之前設定的 it-shadow-03，記住要點選〔更新〕才能生效喔！
回到網頁瀏覽隨即看到剛剛指定的圖片出現了邊框與圓角的效果。
其實讓不懂CSS程式碼的朋友也可以享受網頁設計的樂趣，網路這麼發達的今天，資源相當豐富，這裡介紹 一個相當棒的線上式樣產生器網站 CSSmatic ，例如進入網頁選「Box Shadow」來產生陰影效果。
網站左邊是調整的項目，只要利用滑鼠移動，右側馬上就可以預覽效果，且CSS語法也隨即產生。
將CSS的語法複製下來。
進入編輯CSS的畫面，並定義一個類別名稱（如it-shadow-01），並將語法貼上如下圖紅色框所示。
一樣在編輯區上點選圖片選擇編輯圖示後， CSS 類別設定之前定義的it-shadow-01類別名稱，點選〔更新〕即完成。
下圖顯示有設定過it-shadow-01類別名稱的圖片呈現陰影，沒有設定的圖片遇到圖片是白色底時，與文字間容易產生閱讀的干擾。不懂CSS語法不用擔心，利用樣式產生器網站 CSSmatic 讓你輕鬆製作圖片陰影的效果。
延伸閱讀：
熱門推薦
留言回覆
