美食

卡頌

部落格

【WordPress教學】為什麼特殊符號就是打不出來?簡易CSS讓您的特殊符號正常顯示!
2020-07-15
【WordPress教學】超簡單就能擁有自己的部落格!快速架站新手教學!
2020-07-18

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

更新時間:2020年07月16日

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

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

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

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

目錄:

圖片可透過CSS進行變化

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

第一種變化:圓角效果

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

style=”border-radius: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>

是不是很容易呢!

網站設計

親子

旅遊