CSS3是現代網頁設計的必備技術之一，為網頁設計師提供了許多令人驚嘆的新功能。其中，可以實現圓形放大而不改變邊框的效果就是其中之一。

.circle {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
transition: transform .3s ease-in-out;
position: relative;
overflow: hidden;
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.circle img {
width: 100%;
height: 100%;
}
.circle:hover {
transform: scale(1.2);
}
.circle:hover img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
}

這里的核心就是使用border-radius: 50%讓元素變成一個圓形。縮放動畫使用了transform: scale(1.2)，當鼠標懸停在元素上時觸發。

為了使圖片能夠在圓形范圍內完全顯示并且不能改變邊框形狀，我們需要在div中嵌套一個:before偽元素，使用padding-top: 100%創建一個寬高比為1:1的占位元素。加載圖片后，使用絕對定位將其放置在占位元素上，并使用max-height: 100%和max-width: 100%使其自適應大小，使圖片與邊框剪切。