用border-radius:50%和box-shadow可实现带阴影的圆形图片边框：先确保宽高相等（如150px或aspect-ratio:1/1），再设border-radius:50%成正圆，用object-fit:cover裁剪图片，并在容器上添加box-shadow营造自然阴影。
用 CSS 的 border-radius 和 box-shadow 就能轻松实现带阴影的圆形图片边框，关键在于让图片本身或其容器变成正圆，并添加投影效果。
确保图片是正方形再变圆
圆形边框的前提是元素宽高相等，否则 border-radius: 50% 会变成椭圆：
- 给
<img>设置固定且相等的width和height（如150px） - 或用
aspect-ratio: 1 / 1保持宽高比（现代浏览器支持良好） - 推荐包裹一层
<div> 容器来统一控制样式，更灵活<h3>用 border-radius 切出圆形</h3> <p>对图片或其父容器设置：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/1057" title="Aiva.ai"><img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6ca6565a86158.png" alt="Aiva.ai" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/1057" title="Aiva.ai" class="overflowclass">Aiva.ai</a> <p class="overflowclass">Aiva.ai是一款用于生成多风格原创曲目的 AI 音乐作曲助手。</p> </div> <a rel="nofollow" href="/ai/1057" title="Aiva.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>border-radius: 50%—— 这是最核心一步，把直角变成正圆 - 若想保留一点圆角但不是全圆，可调小数值（如
20px），但“圆形”必须用50% - 注意：如果图片原始尺寸不一致，先用
object-fit: cover确保内容居中裁剪填充
添加自然阴影效果
用 box-shadow 添加外阴影（推荐用在容器上，避免影响图片自身渲染）：
- 基础写法：
box-shadow: 0 4px 12px rgba(0,0,0,0.15) -
0是水平偏移，4px是垂直偏移（让阴影略沉底），12px是模糊半径，rgba(0,0,0,0.15)是半透黑色 - 想要更立体，可加多层阴影：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.12)
完整简洁示例（推荐写法）
HTML：
CSS：
.avatar {width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
overflow: hidden; /* 防止图片溢出圆角 */
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
