CSS2的一個很有用的功能是圖片圓角效果,這可以讓網頁的設計看起來更加美觀,更加現代化。下面是一個簡單的例子,展示如何使用CSS2實現圖片圓角:
img { border-radius: 50%; }
在上面的代碼中,我們使用了CSS2提供的border-radius
屬性,將圖片的邊框變成圓角效果。值為50%
的意思是讓圖片的邊框半徑等于圖片本身寬度或高度的一半,這樣才可以實現完整的圓角效果。
需要注意的是,border-radius
屬性并不是所有瀏覽器都支持,尤其是老舊的瀏覽器。如果需要兼容老舊的瀏覽器,我們可以使用CSS3PIE這樣的插件, 或者在圖片上使用圓角的PNG圖片代替實現。
總之,通過CSS2的border-radius
屬性,我們可以非常方便地實現圖片圓角效果,讓網頁的設計變得更加美觀和現代化。