給圖片添加圓角是使網頁看起來更加美觀的常用技巧之一。在CSS中,我們可以使用border-radius屬性輕松地為圖片設置圓角。
/* 給圖片添加25px的圓角 */ img { border-radius: 25px; }
上面的代碼將圖片的四個角變成了圓角,可以根據需求調整數值。另外,如果想只將圖片的某個角設置成圓角,也可以在border-radius屬性中指定相應的數值,如下:
/* 只設置左下角為10px的圓角 */ img { border-radius: 0 0 10px 0; }
這樣便只會對圖片的左下角進行圓角處理。除了使用CSS樣式表內嵌方式,也可以將樣式提取到外部CSS文件中:
/* style.css */ img { border-radius: 25px; } /* 將CSS文件引入到HTML文檔中 */
這樣,所有的圖片便會自動添加25px的圓角效果。
上一篇編輯css文本有什么用
下一篇編程題css布局練習