CSS中,我們可以使用border-radius屬性使圖片變成圓形。border-radius屬性指定一個(gè)或多個(gè)半徑來(lái)定義元素的圓角,被指定的半徑值指定了一個(gè)定義曲線的圓的半徑。
img { border-radius: 50%; }
其中,50%表示將圖片的四個(gè)角彎曲成圓形。如果想要制作不同大小的圓形,可以調(diào)整border-radius的值。
如果想要調(diào)整圖片位置,可以使用position屬性和transform屬性。
img { border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
其中,top和left將圖片的位置定位在其父元素的中央,transform屬性則使用了translate函數(shù),將圖片在水平和垂直方向上各向左上方移動(dòng)了50%。
以上就是CSS制作圓形圖片的基本方法。當(dāng)然,在實(shí)際項(xiàng)目中,還可以根據(jù)需求進(jìn)行更多的樣式調(diào)整。
上一篇javaee與php
下一篇java123_php