html – 用CSS做这个吗？

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

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

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

最佳答案

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

> IE中低于9的支持不佳
>不像素完美,因为一些盒阴影重叠
>容器必须有位置：相对(或绝对)

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);
}