有没有一个很好的方法来使用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);
}
原文地址:https://www.jb51.cc/html/426444.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。