如何使用 CSS 对图像进行四舍五入

Question

我正在尝试完全基于 CSS 重新创建图像形状。尽管制作这种精确的形状似乎非常困难，因为除了在 svg 中制作轮廓并将其转移到 CSS 属性上之外，我似乎找不到可以解决的 CSS 属性，但这似乎是错误的。

因此，我想知道我是否遗漏了什么，这似乎是一项简单的任务。

图像形状可以在这里看到：

这不是一个简单的border-radius问题，正如先前标记的重复所暗示的那样，因为它在“边”中凸出，在使用边界半径或“圆形”时它会是直的。

Answer 1

显然，这种形状被称为 Squircle。在我找到该术语后，很容易找到已经找到创建形状的解决方案的人。如果其他人需要它（绝对不像border-radius那么简单），我将把解决方案留在这里：

请注意，我没有创建这个解决方案，所有的功劳都应该归功于 Mkmueller，https : //codepen.io/mkmueller/，他的解决方案在这里：https : //codepen.io/mkmueller/pen/wRJYKa

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

svg.defs {
    position: absolute;
    width: 0;
    height: 0;
}

.squircle {
    width: 75vmin;
    height: 75vmin;
    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;
    clip-path: url(#squircle);
}

.wrapper {
    filter: drop-shadow(0 0 100px rgba(#000, .25));
}

<svg class="defs">
    <defs>
        <clipPath id="squircle" clipPathUnits="objectBoundingBox">
            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>
        </clipPath>
    </defs>
</svg>

<div class="wrapper">
    <div class="squircle"></div>
</div>