有没有一个很好的方法来使用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);
}
