CSS中圓角邊框是一種常用的效果,能夠讓頁面顯得更加美觀,增加用戶體驗。
/* 給一個div加上圓角邊框 */ div { border: 1px solid #ccc; border-radius: 10px; } /* 為一個按鈕添加圓角邊框 */ button { border: none; border-radius: 20px; padding: 10px 20px; background: #007bff; color: #fff; cursor: pointer; }
使用border-radius屬性可以實現圓角邊框的效果,在屬性值中指定圓角的半徑即可。如果所有四個角的半徑相同,可以直接使用一個數值,如border-radius:10px,表示四個角的半徑為10像素。也可以分別指定不同的角的半徑,如border-radius: 10px 20px 30px 40px,表示左上角為10像素,右上角為20像素,右下角為30像素,左下角為40像素。如果某個角不想顯示圓角,可以將對應的半徑值設為0。
另外,可以通過使用CSS偽元素(如:before或:after)來創建帶有圓角的三角形或箭頭等形狀,以達到更炫酷的效果。使用CSS的圓角邊框可以輕松為網頁增加美感和獨特的風格,提高用戶的視覺體驗。
上一篇html 設置下拉框選中
下一篇css中圓角邊框屬性