CSS鼠標經過加框是Web開發中常用的一種效果。該效果可以讓鼠標經過頁面上的特定元素時，元素周圍出現一個邊框，突出顯示該元素。這種效果可以為網站的視覺體驗增添很多樂趣，下面將介紹相關的CSS代碼。 首先，我們需要在CSS中定義一個類，以便在HTML中使用。代碼如下所示：

這段代碼定義了一個名為“bordered”的類，其中設置了元素的邊框樣式為1個像素寬的黑色實線。接下來，在HTML中需要應用這個類。例如，如果我們要將一個圖片元素添加這種效果，可以像下面這樣寫：

我的照片:

這段HTML代碼中，圖片元素“<img>”應用了名為“bordered”的CSS類，這將帶來鼠標經過加框的效果。 上面代碼的效果是鼠標經過任何一個圖片時都會加框，但有時我們只想針對一部分圖片應用這種效果。為了達到這個目的，我們可以使用類似“:hover”這樣的CSS偽類。如下所示：

這里我們定義了另一個類“photo”，并在“:hover”偽類中設置元素的邊框為3個像素寬的紅色實線。在HTML中，我們可以為需要應用此效果的圖片元素添加“photo”類，如下所示：

我的照片:

在這段HTML代碼中，“<img src="myphoto1.jpg" class="bordered">”只應用了“bordered”類，沒有鼠標經過加框的效果。而“<img src="myphoto2.jpg" class="bordered photo">”和“<img src="myphoto3.jpg" class="bordered photo">”都應用了“bordered”和“photo”兩個類，鼠標經過時會出現紅色邊框。 以上就是CSS鼠標經過加框的相關代碼和實現方法。通過這種方式，我們可以為頁面中的某些元素添加突出的效果，使頁面變得更加美觀和有趣。