是否有可能用CSS制作这个？

Question

有没有一个很好的方法来使用HTML/CSS？基本上是一个div,边缘有一个"凹凸"的圆圈.这部分很容易使用伪类,但我的问题是使投影将其视为形状的一部分.

当我分别对圆圈应用阴影时,它不能可靠地工作.我知道有办法做到这一点..但我不确定浏览器的支持是什么.

你们建议什么是解决这个问题的最佳方法？谢谢!

Answer 1

你可以通过一堆CSS来接近这个.有关实例,请参阅此JSFiddle.但是,有一些缺点:

• IE中低于9的支持不佳
• 由于某些盒阴影重叠,因此不是像素完美的
• 容器必须有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);
}