在CSS中,我們可以通過修改border-radius屬性來改變一個元素的圓角弧度。
/* 語法 */ border-radius: 上左/上右/下右/下左; /* 示例 */ border-radius: 10px; /* 所有角都是10px的圓角 */ border-radius: 10px 20px; /* 上下左右兩個角分別是10px和20px */ border-radius: 10px 20px 30px; /* 上右下左四個角圓角依次是10px、20px、30px、20px */ border-radius: 10px 20px 30px 40px; /* 上左、上右、下右、下左四個角圓角依次是10px、20px、30px、40px */
除了像上面這樣直接指定像素值之外,我們還可以使用百分比、em等單位進行圓角弧度的調整。我們甚至可以使用border-radius讓一個元素變成一個圓形。
/* 寫法1:使用百分比 */ border-radius: 50%; /* 寫法2:使用em */ border-radius: 1em; /* 寫法3:只針對某一個角的圓角調整 */ border-top-left-radius: 10px;
當我們需要調整一個元素的圓角弧度時,可以通過不同的寫法靈活運用border-radius屬性。
下一篇css怎么更改被選中