html - 可以用 CSS 实现吗？

Question

是否有使用 HTML/CSS 实现此功能的好方法？基本上是一个 div，边缘有一个圆圈“凸起”。这部分使用伪类很容易，但我的问题是让投影将其视为形状的一部分。

当我单独为圆圈应用投影时，它无法可靠地工作。我知道有办法做到这一点..但我不确定浏览器支持什么。

你们推荐什么是解决此问题的最佳方法？谢谢!

Answer 1

您可以使用一堆 CSS 来接近这一点。参见 this JSFiddle一个活生生的例子。但是，也有缺点:

• 对低于 9 的 IE 的支持不佳
• 像素不完美，因为一些框阴影重叠
• 容器必须有position: relative(或absolute)

CSS:

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    position: relative;
}

div:before {
    display: block;
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    left: -20px;
    top: 30px;
    border-radius: 20px;
    box-shadow: 0 0 10px black;
    clip: rect(-10px, 20px, 50px, -10px);
}