图片加圆形边框并添加投影效果的关键是：先用 width 和 height 设为相等值确保正方形，再用 border-radius: 50% 实现圆形裁剪，配合 border 设置可见边框，最后用 box-shadow 添加多层阴影增强立体感。

给图片加圆形边框并添加投影效果，核心是用 border-radius: 50% 实现圆形裁剪，再配合 box-shadow 添加阴影。注意图片需为正方形才能显示完整圆形，否则会变成椭圆。

确保图片是正方形

圆形裁剪的前提是宽高相等。如果原始图片不是正方形，可通过 CSS 强制设为正方形：

• 给 设置固定宽高，如 width: 200px; height: 200px;
• 或使用 aspect-ratio: 1 / 1;（现代浏览器支持良好）
• 避免只设 width 不设 height，否则 border-radius: 50% 无效

用 border-radius 制作圆形边框

border-radius: 50% 是关键，它让四个角的圆角半径等于宽高的一半，从而形成正圆：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 直接写 border-radius: 50%; 即可，无需单位
• 若想加可见边框，可搭配 border: 3px solid #3498db;
• 边框颜色、粗细可自由调整，不影响圆形效果

添加自然的投影效果

用 box-shadow 添加阴影，推荐使用多层阴影提升立体感：

• 基础投影：box-shadow: 0 4px 12px rgba(0,0,0,0.15);
• 增强立体感可叠加两层：box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 6px 16px rgba(0,0,0,0.15);
• 阴影偏移值（前两个数字）控制方向和距离，模糊值（第三个）控制柔和度

完整示例代码

复制以下代码即可直接使用：

@@##@@

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！