更新時間:2020年07月16日
早期的網站內容幾乎都是文字,只有少量的圖片點綴。
隨著響應式網站的興起,大家的眼界也更開闊了,
網站呈現的樣式也產生巨大的改變,從原本的文字慢慢朝著圖片為主的網站越來越多!
今天要教學的是圖片透過簡易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>
是不是很容易呢!