在網頁設計中,我們通常使用
li { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; border-radius: 50px; }
如上所示的CSS代碼可以實現一個圓形的按鈕。其中,border-radius屬性可以控制邊框的圓角大小。我們將它設置為50px,就形成了一個完美的圓形按鈕。
li { display: block; cursor: pointer; padding: 10px 20px; background-color: #4CAF50; color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; }
除了圓形按鈕,我們還可以制作帶有不同形狀的按鈕。例如,如上所示的CSS代碼可以制作一個有弧形上緣的矩形按鈕。其中,display屬性被設置為block,這意味著按鈕會占據整個父容器的寬度,而不是僅占一部分。另外,使用border-top-left-radius和border-top-right-radius屬性將左上角和右上角設置成了弧形,制造出了矩形按鈕上部弧形的效果。
總的來說,使用CSS來改變
上一篇css3垂直翻轉背景
下一篇css3地球軌道