CSS3圓角半徑設置是指在CSS3中設置HTML元素的邊框圓角的弧度大小,可以使元素看起來更加圓潤美觀。圓角半徑可以分為單獨設置某一角的圓角半徑和同時設置四角的圓角半徑兩種方式。
/* 單獨設置左上角圓角半徑為10px */ #box { border-top-left-radius: 10px; } /* 同時設置四個角的圓角半徑為10px */ #box { border-radius: 10px; }
除了使用具體的像素值設置圓角半徑外,也可以使用百分比值、長度值、甚至可以使用關鍵詞等方式設置圓角半徑。
/* 使用百分比值設置圓角半徑 */ #box { border-radius: 50%; } /* 使用長度值設置圓角半徑 */ #box { border-radius: 5em; } /* 使用關鍵詞設置圓角半徑 */ #box { border-radius: inherit; }
CSS3的圓角半徑設置非常靈活,可以滿足各種不同的需求。但需要注意的是,在使用圓角半徑設置時,應盡量避免將半徑值設置得過大,以免影響頁面加載速度。
上一篇css3增加新特性列表
下一篇css3在線動畫庫