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

Question

我正在尝试完全基于 CSS 重新创建图像形状。虽然看起来很难做出这个精确的形状，因为除了在 svg 中制作轮廓并将其传输到 CSS 属性之外，我似乎找不到可以解决的 CSS 属性，但这似乎是错误的。

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

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

这不是一个简单的 border-radius 问题，因为它在使用 border-radius 或“to -圆形”。

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>