CSS可以實現(xiàn)多個圖片圓形排列的效果。我們可以通過設置樣式對圖片進行操作,使用border-radius屬性將圖片變成圓形。
.img-list { display: flex; justify-content: center; align-items: center; } .img-item { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 10px; } .img-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
通過設置display:flex可以使圖片排列在同一行,使用justify-content:center和align-items:center將圖片居中對齊。接著對每個圖片進行樣式設置。將容器寬高設置為相同值,border-radius屬性設置為50%即可將圖片變成圓形,overflow:hidden用于剪切超出部分。最后對圖片進行設置,使之鋪滿容器,達到圓形效果。
我們還可以使用眾多CSS框架中的樣式類庫輕松實現(xiàn)可定制化的效果,例如Materialize、Bootstrap、Tailwind CSS等。
最終實現(xiàn)效果如下: