【WordPress教學】誰說圖片只能很無味？讓簡易CSS變化一下吧！

更新時間：2020年07月16日

早期的網站內容幾乎都是文字，只有少量的圖片點綴。

隨著響應式網站的興起，大家的眼界也更開闊了，

網站呈現的樣式也產生巨大的改變，從原本的文字慢慢朝著圖片為主的網站越來越多！

今天要教學的是圖片透過簡易CSS可以呈現哪些樣式！

目錄：

• 圖片可透過CSS進行變化
• 圓角效果
• 邊框效果
• 邊框效果變化
• 加入超連結

圖片可透過CSS進行變化

這樣方方正正的圖片該怎麼做變化呢？

第一種變化：圓角效果

在圖片的語法後方加上CSS樣式：

style=”border-radiu:20px;”

20px是示範的圓角數值，可以自行做修改。

這種做法是一次設定四個角，當然也可以分開設定：

左上角 border-top-left-radius右上角 border-top-right-radius右下角 border-bottom-right-radius左下角 border-bottom-left-radius 

第二種變化：邊框效果

在圖片的語法後方加上CSS樣式：

style=”border: 1px solid #ddd;border-radius: 4px;padding: 5px;”

border: 1px solid #ddd- 邊框，寬度1像素，實線，顏色#ddd。

border-radius: 4px – 圓角4像素。

padding: 5px; – 內距5像素。

第三種變化：邊框效果變化

將剛剛的CSS樣式略做變化

solid改成dashed #ddd改成#000

實線改成虛線，顏色改為#000

style=”border: 1px dashed #000;border-radius: 4px;padding: 5px;”

加入超連結

利用簡易CSS語法將圖片包夾：

<a href=”指定連結位置”>圖片</a>

是不是很容易呢!