CSS中的active屬性是用來設置元素在被單擊時的樣式的。當元素被單擊時,它的active樣式將被應用。在平時的樣式中,我們可以設置元素的背景顏色、文本顏色、字體大小等,而在active樣式中,我們可以為元素設置其他樣式,如邊框寬度、邊框顏色等。
.button { padding: 10px; background-color: red; color: white; border: none; border-radius: 5px; } .button:active { border: 2px solid black; border-radius: 10px; }
在上面的代碼中,我們定義了一個名為button的class,它被應用于一個按鈕元素上。在普通狀態下,該按鈕具有紅色背景、白色文本、沒有邊框和圓角。但是在被單擊時,我們想為該按鈕添加一個邊框和更大的圓角,以提高用戶的響應感。這就可以通過active屬性完成。
需要注意的是,active屬性只適用于被單擊的元素,并且只在元素處于活動狀態時應用樣式。當用戶釋放鼠標按鈕時,樣式將恢復到普通狀態。因此,使用active屬性時要合理地運用大小、顏色和樣式等特性,以使用戶的操作更為直觀和有效。