如何使用百分比形式的border-radius裁剪JPG图片适配CSS布局？

方案一：精准调整border-radius参数 #

先确保图片容器的宽高比和参考图一致，再调整border-radius数值适配形状。试试这个参数：

border-radius: 85% 0 48% 48% / 55% 0 35% 35%;

如果仍有白边，检查图片本身是否边缘带有白色像素，用图片编辑工具（比如PS）先裁掉多余白色区域再导入使用。

方案二：用clip-path实现精准裁剪 #

border-radius的百分比基于元素宽高计算，复杂形状很难完全匹配，clip-path可以自定义精准裁剪路径：

clip-path: polygon(0 0, 100% 0, 100% 65%, 85% 100%, 15% 100%, 0 65%);

你可以根据参考图的形状，调整polygon里的百分比坐标（比如0 0是左上角，100% 100%是右下角），直到完全匹配布局效果。

额外注意事项 #

• 保证图片容器尺寸和参考图比例一致，避免图片拉伸变形导致裁剪效果偏差
• 如果是容器背景色透过缝隙显示，给容器设置和图片边缘相近的背景色，或者给图片添加object-fit: cover让它完全填充容器

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