CSS中,我們可以使用border-radius屬性來實現圓角邊框。該屬性有四個值,分別代表四個角的圓角半徑,如果只設置一個值,則代表四個角的半徑均為該值。
/* 設置所有角的半徑為10px */ .box{ border-radius: 10px; } /* 設置左上角和右下角的半徑為15px,右上角和左下角的半徑為5px */ .box{ border-radius: 15px 5px; }
當然,我們也可以使用像素值以外的單位來設置圓角半徑。比如使用em單位,可以讓圓角半徑跟隨字體大小的調整而變化。
.box{ border-radius: 1.5em; }
此外,border-radius還支持不同大小和形狀的橢圓半徑,使用方式與四個圓角半徑的設置方式類似。
/* 設置左上角為20px的圓角,右下角為40px*20px的橢圓圓角 */ .box{ border-radius: 20px 0 0 40px/20px; }
綜上,border-radius是一個非常有用的CSS屬性,可以為網頁設計增加更多美觀的效果。
上一篇jquery調整邊框顏色
下一篇css怎么給多個類