CSS中的圓角矩形是一種非常常用的樣式,可以用來美化網頁。實現圓角矩形的方法有很多,其中最簡單的是使用border-radius屬性。
border-radius: 10px;
border-radius屬性有四個值,分別用來控制四個角的圓角弧度。當只給一個值時,表示四個角都是相同的圓角半徑。
border-radius: 10px 20px 30px 40px;
當給定四個值時,分別表示左上、右上、右下、左下四個角的圓角半徑。
需要注意的是,某些老舊的瀏覽器可能不支持border-radius屬性,這時可以考慮使用CSS3的hack技巧來兼容。
/* Safari */ -webkit-border-radius: 10px; /* Firefox */ -moz-border-radius: 10px; /* Opera */ border-radius: 10px;
以上代碼中,-webkit-border-radius和-moz-border-radius分別是針對Safari和Firefox瀏覽器的hack寫法。
總之,使用border-radius可以輕松實現圓角矩形效果,無需麻煩的圖像處理,讓網頁變得更加美觀。