CSS 是網頁設計中必不可少的一項技術。如果你想讓你的網頁看起來更美觀,那么你就需要掌握一些 CSS 技巧。其中一個技巧就是如何為圖片添加圓角。
img { border-radius: 50%; }
上面的代碼會將圖片的四個角都變成圓角。如果你想只將左上角和右下角變成圓角,可以寫:
img { border-top-left-radius: 50%; border-bottom-right-radius: 50%; }
除了使用百分比,你還可以使用像素來指定圓角的大小。例如:
img { border-radius: 10px; }
上面的代碼會將圖片的四個角都變成半徑為 10 像素的圓角。同樣,你也可以為不同的角指定不同的半徑:
img { border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; }
上面的代碼將左上角的圓角半徑設為 20 像素,右上角的圓角半徑設為 10 像素,右下角的圓角半徑設為 5 像素,而左下角則不變成圓角。
通過使用 CSS 圓角,你可以制作出更加美觀的網頁。希望這篇文章能對你有所幫助!
上一篇css 圖片定位右下角
下一篇css 圖片廣告特效