使用Tailwind CSS实现Div圆角：移动端显示异常问题求助

我用Tailwind CSS给图片设置圆形样式，PC端显示正常，但移动端却变成带紫色轮廓的正方形，网站已经部署在Netlify。查过相关问题但没解决，我的代码如下：

<div class="w-[45%] md:pl-5 hidden sm:block">
  <!-- MY PHOTO -->
  <img
    class="w-48 h-48git 2xl:m-auto rounded-full outline-2 outline-purple-500 outline overflow-hidden"
    src="/components/myphoto.png"
    alt="My Photo"
    style="border-radius: 50%;"
  />
</div>

解决步骤： #

1. 修复无效类名：代码里的h-48git是错误输入，改成h-48——无效类会干扰Tailwind的样式生成逻辑，导致移动端布局错乱、圆角不生效。
2. 调整轮廓样式：默认outline是矩形的，不会跟随圆角边缘显示，把outline替换成outline-offset-0，让轮廓贴合圆形；如果想要更自然的圆角轮廓，推荐用ring系列类（比如ring-2 ring-purple-500 ring-offset-0），ring会自动适配圆角形状。
3. 移除冗余行内样式：Tailwind的rounded-full已经实现了50%圆角效果，删掉行内的style="border-radius: 50%;"，避免样式冲突。
4. 确保宽高一致：w-48 h-48保证图片是严格正方形，这是rounded-full生成完美圆形的前提，移动端不会因为宽高比例偏差变形。

修改后的代码：

<div class="w-[45%] md:pl-5 hidden sm:block">
  <!-- MY PHOTO -->
  <img
    class="w-48 h-48 2xl:m-auto rounded-full outline-2 outline-purple-500 outline-offset-0 overflow-hidden"
    src="/components/myphoto.png"
    alt="My Photo"
  />
</div>

如果用ring替代outline，圆角轮廓效果会更自然：

<div class="w-[45%] md:pl-5 hidden sm:block">
  <!-- MY PHOTO -->
  <img
    class="w-48 h-48 2xl:m-auto rounded-full ring-2 ring-purple-500 ring-offset-0 overflow-hidden"
    src="/components/myphoto.png"
    alt="My Photo"
  />
</div>

内容的提问来源于stack exchange，提问作者xoreks