要寫圓形圖片,我們需要使用 CSS3 的 border-radius 屬性。這個屬性能夠讓我們輕松地創建一個圓形的邊框。
首先,先給圖片創建一個固定的寬度和高度,定義一個 class,并設置樣式:
img.round { width: 200px; height: 200px; }
接下來,我們再通過 border-radius 屬性為該圖片添加一個圓形的邊框:
img.round { width: 200px; height: 200px; border-radius: 50%; }
其中,50% 的值表示圓形邊框的半徑等于圖片寬度的一半。
最后,我們將圖片放在一個容器中,并設置容器的大小和邊距即可:
div.round-container { width: 200px; height: 200px; margin: 50px auto; }
最終的 HTML 代碼如下所示:
<div class="round-container"> <img class="round" src="圖片鏈接" alt="圖片描述"> </div>
這樣,就可以輕松地在網頁中創建一個圓形圖片了。
上一篇如何全局定義css樣式
下一篇如何兌換css邊框