jQuery Mobile 是一个基于 jQuery 的移动应用开发框架，它提供了丰富的组件和工具，使得开发者可以更加便捷的构建移动应用程序。其中，圆形图片是一种非常流行的图像展示方式，让我们来学习一下如何使用 jQuery Mobile 实现圆形图片。
首先，我们需要准备一张要展示的图片，如下所示：
<img src="avatar.jpg" alt="Avatar" id="avatar">
接下来，我们需要使用 CSS 将图片变成一个圆形，可以使用以下代码：
#avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}以上代码会将图片的宽高设置为 100px，将边框半径设置为 50%，从而达到圆形效果。然后，使用 `overflow: hidden;` 隐藏掉图片超出圆形边界范围的部分。
最后，我们需要将圆形图片添加到页面中。使用以下代码，将圆形图片插入到一个 `
` 标签中：
<div data-role="page"> <div data-role="content"> <div id="avatar-wrapper"> <img src="avatar.jpg" alt="Avatar" id="avatar"> </div> </div> </div>
以上代码中，`data-role="page"` 表示该页面是一个 jQuery Mobile 页面，`data-role="content"` 表示该页面内容区域，`avatar-wrapper` 是一个包裹圆形图片的 `
` 元素。最后，在此 `
` 中插入圆形图片即可。
现在，我们已经学会了如何使用 jQuery Mobile 实现圆形图片的效果。欢迎快快实践并体验这个美妙的效果!
