CSS 中的border-radius
屬性可以用來設置一個元素的邊框圓角。該屬性可以取一個或多個值,表明元素的四個角的圓角程度。
/* 設置四個圓角的相同程度 */ border-radius: 10px; /* 分別設置四個圓角的程度 */ border-radius: 10px 20px 30px 40px; /* 設置水平方向的圓角程度為 10px */ border-radius: 10px 0 10px 0; /* 設置正方形元素的圓角程度為 50% */ border-radius: 50%;
在多數情況下,我們應該盡可能使用border-radius
屬性來實現圓角效果,而避免使用圖片或 JavaScript 等方式。使用border-radius
可以減少 HTTP 請求次數,并提高網頁性能。
需要注意的是,border-radius
在 IE6、IE7、IE8 等瀏覽器中不被支持。在這些瀏覽器中,我們可以選擇使用 jQuery 或 Modernizr 等庫來實現類似的效果。