是否有使用 HTML/CSS 实现此功能的好方法?基本上是一个 div,边缘有一个圆圈“凸起”。这部分使用伪类很容易,但我的问题是让投影将其视为形状的一部分。
当我单独为圆圈应用投影时,它无法可靠地工作。我知道有办法做到这一点..但我不确定浏览器支持什么。
你们推荐什么是解决此问题的最佳方法?谢谢!
最佳答案
您可以使用一堆 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);
}
关于html - 可以用 CSS 实现吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15972604/