效果預覽

輸入框 hover 時邊框發光（實為陰影擴散形成高亮假象）。

核心代碼

.aa:hover {
  -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
  border-color: rgba(141, 39, 142, .75);
  -webkit-box-shadow: 0 0 18px rgba(111, 1, 32, 3);
}
.aa {
  height: 100px;
  width: 100px;
}

關鍵點解析

1. transition 過渡：border linear .2s 邊框屬性漸變，-webkit-box-shadow linear .5s 陰影漸變；
2. rgba(a,b,c,d)：前三位定顏色，第四位控制透明度，必須牢記；
3. box-shadow：x y blur-radius rgba(...)，x/y 為陰影方向，blur 為擴散距離，最後為陰影顏色；
4. :hover 偽類：觸發條件，基礎且常用。

幾行代碼即刻實現高亮邊框，適配 WebKit 內核瀏覽器。其他內核需加對應前綴。

本文首發：網絡教學基地 原文：https://www.studynb1.com/css/84.html