圓角矩形是一種非常常見的形狀,它經(jīng)常被用來作為標簽、按鈕的背景。如果想要制作一個圓角矩形的樣式,可以使用 CSS 中的 border-radius 來實現(xiàn)。
border-radius: 10px;
上面的代碼中,10px 表示每個圓角的半徑大小。如果希望每一個圓角的大小不同,可以指定四個不同的半徑值,分別對應左上、右上、右下、左下四個方向的圓角。
border-radius: 10px 20px 30px 40px;
除了使用具體的像素值,還可以使用百分比來表示圓角的大小。這種方法通常比較適合在制作響應式設計時使用。
border-radius: 50%;
如果希望制作出橢圓形的效果,可以先把元素的寬高比設置為 1:2,然后再加上圓角屬性。
width: 200px; height: 100px; border-radius: 50%;
最后需要注意的一點是,如果要兼容不支持 border-radius 的瀏覽器,可以使用圖片來實現(xiàn)圓角效果。