CSS是網頁美化中不可或缺的一環,它可以實現很多網頁效果,其中一個常用的功能是給圖片設置圓角。
/** 設置圖片圓角 **/ img { border-radius: 50%; /* 這里數字越大,圖片越圓 */ }
以上代碼中,我們使用了border-radius
屬性,它可以設定元素的邊框圓角程度。在這里,我們給圖片設置了50%的圓角,也就是說整個圖片都呈現出圓形。如果要調整圓角程度,只需要修改百分比數值即可。
需要注意的是,這里設置的是圖片的圓角,而不是圖片容器的圓角。如果只是想讓圖片所在的容器有圓角效果,需要將上述代碼應用于容器元素,而不是圖片元素。
/** 設置容器圓角 **/ .container { border-radius: 10px; /* 這里可自行調整圓角大小 */ }
以上代碼中,我們為容器設置了10像素的圓角。同樣需要注意的是,border-radius
屬性可適用于各類元素,如文本框、按鈕、甚至是整個網頁的圓角等。只需要根據需要使用相應代碼即可。