CSS可以輕松地實現圖片圓形效果,這是非常方便的。在下面我們將會介紹兩種常見的實現方法。
第一種是使用CSS3中的border-radius
屬性。我們可以把border-radius
的值設置為50%來將矩形圖片變成圓形。
img { border-radius: 50%; }
第二種方法是使用CSS3中的clip-path
屬性。這種方法需要使用polygon()
函數來將圖片裁切成一個正多邊形,但是需要注意的是這個方法不支持IE瀏覽器。
img { clip-path: polygon(50% 0%, 93% 25%, 100% 69%, 75% 100%, 25% 100%, 0% 69%, 7% 25%); }
這兩種方法都可以輕松地實現圓形圖片的效果。你可以根據實際需求來選擇其中的一個方法。
上一篇css如何實現圓柱效果
下一篇ajax實例 strus