CSS是一種用于設置網頁樣式的語言,它可以讓我們實現各種各樣的效果。今天,我們來學習如何用CSS設置愛心圖片邊框。
首先,我們需要準備一張愛心圖片。可以從網絡上找一個,也可以自己畫一個。代碼如下:
<img src="heart.png" alt="愛心圖片">
接下來,我們要為這張圖片設置邊框。同樣的,我們可以使用CSS來實現。代碼如下:
img { border: 5px solid pink; border-radius: 50%; }
上面的代碼首先設置了一個5像素寬的粉色實線邊框,然后使用了border-radius屬性將邊框的四個角圓滑化,從而形成一個圓形的邊框。
最后,我們再加一點CSS來讓整個頁面更美觀。代碼如下:
body { background-color: #f0f0f0; text-align: center; padding-top: 50px; }
這段代碼將頁面的背景顏色設置為淺灰色,讓頁面居中對齊,并在頁面頂部添加了50像素的內邊距。
通過以上的三段CSS代碼,我們可以很方便地設置一個帶有愛心邊框的圖片頁面。效果圖如下:
上一篇css設置田字格怎么寫
下一篇置底菜單效果怎么做css