CSS(Cascading Style Sheets)是一種用于Web頁面設(shè)計的語言,可以通過它來定義各種文本、圖像、背景和布局的樣式。今天我們要介紹的是如何使用CSS來讓圖片變成圓形。
img { border-radius: 50%; }
上述代碼是通過設(shè)置一個常用樣式屬性 - border-radius 來實(shí)現(xiàn)的。border-radius屬性用于設(shè)置邊框的圓角。默認(rèn)情況下,這個屬性會把圖片的4個角變成圓角,但我們這里將它設(shè)置為50%。
這個50%的值意味著,它會根據(jù)圖片的寬高比例自動調(diào)整圓角的大小,使得四個角都能剛好聯(lián)成一個圓形。這樣,我們就可以非常方便地讓圖片變成圓了。
總結(jié)一下,使用CSS讓圖片變圓很簡單,只需設(shè)置border-radius屬性值為50%即可。