在Web開發中，CSS作為前端技術之一，可以實現豐富多樣的效果。其中，鼠標經過長方形的效果是一種常見的交互效果。在HTML代碼中，我們可以使用div標簽創建一個長方形的容器：

<div class="rectangle"></div>

接著，在CSS樣式表中，我們可以對這個容器進行美化，并添加鼠標經過的效果。以下是樣式表的代碼：

.rectangle {
width: 200px;
height: 100px;
background-color: #f7b285;
border: 2px solid #e69138;
border-radius: 10px;
box-shadow: 3px 3px 5px #bfbfbf;
margin: 20px auto;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 24px;
font-weight: bold;
transition: all 0.3s ease;
}
.rectangle:hover {
background-color: #e69138;
border: 2px solid #f7b285;
box-shadow: 6px 6px 10px #bfbfbf;
}

在這段代碼中，我們使用了一些CSS屬性來美化長方形容器，如width、height、background-color、border等。同時，我們還使用了box-shadow屬性來添加一個3D效果，使長方形看起來更加生動。在:hover偽類中，我們針對鼠標經過狀態對容器的部分屬性進行了修改，實現了長方形背景色、邊框、陰影的變化效果。

這樣，我們通過HTML和CSS實現了一個簡單的長方形交互效果。通過這個例子，我們不僅了解了如何使用HTML和CSS創建基本頁面元素，還掌握了如何使用CSS實現交互效果。