在CSS中,圓角矩形是一種常見的形狀,常用于美化界面。要調整圓角的大小,可以使用border-radius屬性。該屬性的值可以是單個數字表示四個角相同的圓角半徑,也可以是四個數字組成的序列,分別表示左上角、右上角、右下角和左下角的圓角半徑。
/* 單個數字 */ div { border-radius: 50px; } /* 四個數字 */ div { border-radius: 10px 20px 30px 40px; }
如果想要設置一個圓形,可以把border-radius的值設置成50%,即半徑與長寬相等的一半。
div { border-radius: 50%; }
此外,border-radius還可以接受一個特殊的值inset,表示內陰影效果,同時也允許設置相應的圓角半徑。
/* 內陰影 */ div { box-shadow: inset 0 0 10px #000; border-radius: 10px; }
通過border-radius屬性,我們能輕松地調整圓角矩形的形狀,實現各種豐富的視覺效果。