如何使用CSS实现图片圆角

Question

我正在尝试仅基于CSS重新创建一个图像形状。虽然似乎很难做到这个精确的形状，因为我似乎找不到除了在SVG中制作轮廓并将其传递到CSS属性之外的CSS属性来解决这个问题，但那似乎是错误的。因此，我想知道是否有我遗漏的东西，它看起来像一个简单的任务。可以在此处查看图像形状： 这不是一个简单的border-radius问题，正如之前标记为重复的问题所建议的那样，因为它在“侧面”凸出，在使用border-radius或“to-round”时会变直。

- Rakkey

---

你尝试设置边框半径了吗？ - kojow7

我不同意这个重复，这里不仅仅是简单的border-radius。 - Temani Afif

我非常确定clip-path在这里有一个解决方案。对于复制这个图像的确切约束条件还不确定，但是这里有一个可以开始的游乐场：https://bennettfeely.com/clippy/ - Griffin

重复并不相同。OP试图制作一个squircle掩模，这是https://dev59.com/iFwY5IYBdhLWcg3wH0xC的副本。 - Artur Kim

@ArturKim 你比我更快地更新了，当我找到形状的名称时，已经有一个解决方案了 :) 虽然如此，还是感谢你的评论，两位管理员可能在图像上看得太快了。 - Rakkey

我重新打开了这个问题，请用你找到的内容回答自己的问题，不要把它放在问题上。 - Temani Afif

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>

- Rakkey