CSS中,我們可以使用border-radius屬性將圖片圓形化,這是一種很流行的圖片展示方式,非常適合用于頭像、產品展示等場景。
/*讓圖片展示成圓形*/ img{ border-radius:50%; }
需要注意的是,圖片圓形化時,需要指定border-radius屬性的值為50%,如果值為其他數值,則圓角的度數會變化。
除了使用border-radius屬性,我們還可以使用clip-path屬性將圖片裁剪成圓形。
/*讓圖片展示成圓形*/ img{ clip-path: circle(50% at center); }
clip-path屬性中circle()函數的參數表示一個圓形,其中50%表示圓形的半徑,center表示圓心在圖片的中心位置。
以上兩種方法都可以實現圖片的圓形展示,根據場景和個人喜好選擇即可。
上一篇hlsw php