在網頁設計中，常常需要讓用戶與按鈕進行交互，以實現各種功能。然而，在沒有視覺提示的情況下，用戶無法得知是否正確地點擊了按鈕。因此，開發人員需要使用CSS來實現在用戶點擊按鈕時顯示邊框，從而提高用戶體驗。
首先，在HTML中創建我們需要的按鈕：
接著，在CSS中定義按鈕的樣式，為其設置點擊效果：
button {
border: none; /* 去除默認邊框 */
background-color: #4CAF50; /* 按鈕背景色 */
color: white; /* 文字顏色 */
padding: 15px 32px; /* 內邊距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去除下劃線 */
display: inline-block; /* 塊級元素 */
font-size: 16px; /* 字體大小 */
margin: 4px 2px; /* 外邊距 */
cursor: pointer; /* 鼠標樣式 */
}
button:focus {
outline: solid 2px #4CAF50; /* 點擊時添加2像素實線邊框 */
}通過:focus選擇器，我們可以為按鈕添加一個點擊狀態的樣式。在上面的代碼中，我們為按鈕添加了一個2像素實線邊框，邊框顏色與按鈕背景色相同。
現在，當用戶點擊按鈕時，就會顯示一個實線邊框，告訴用戶他們已經正確地點擊了按鈕。
總結一下，通過使用:focus選擇器，我們可以在用戶點擊按鈕時使用CSS來顯示邊框，提高用戶體驗。