CSS圆形放大镜是一种常见的网页设计效果，可以让用户通过鼠标悬停在图片上时，观察到图片的局部细节。在这篇文章中，我们将会学习如何编写一个简单的CSS圆形放大镜。

/* 首先，我们需要设置图片所在容器的基本样式 */
.img-container {
position: relative;
width: 300px;
}
/* 在图片容器上创建一个小的圆形区域，用来显示放大细节 */
.lens {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid #000;
opacity: 0.5;
cursor: none;
}
/* 给图片容器设置鼠标悬停事件，当鼠标停留时，显示放大区域 */
.img-container:hover .lens {
display: block;
}
/* 使用鼠标事件实现放大效果 */
.img-container:hover img {
transform: scale(2);
transform-origin: top left;
transition: transform 0.5s ease;
}
/* 设置放大区域的位置和放大比例 */
.lens:hover {
background: url('example.png') no-repeat;
background-size: 600px 400px;
background-position: -100px -200px;
transform: scale(2.5);
transform-origin: top left;
}

通过上述CSS代码，我们可以为图片容器创建一个圆形放大镜效果。当鼠标悬停在图片上时，我们创建了一个圆形区域，观察者可以利用该区域来看到放大的图像细节。放大区域的位置和放大比例可以通过CSS代码进行调整。