一、圖片實現圓形條件
原本不是圓形圖片,通過CSS樣式布局實現成圓形圖片,首先圖片必須為正方形。
二、使用布局技術
使用CSS3 圓角技術實現。
使用CSS3樣式單詞:border-radius
語法:
div{border-radius:5px}
對圖片設置圓角樣式:
.abc img{border-radius:5px}
設置class=”abc”對象圖片四個角圓角為5px
三、CSS圓角實現圖片圓形實例
首先一張正方形圖片,放入一個DIV盒子內,通過對盒子內圖片設置border-radius:50%實現圓形效果。
本案例在DIVCSS5初始化模板基礎上完成。
1、HTML源代碼完整代碼:
新聞熱點
疑難解答