记录CSS实现半透明圆形镂空遮罩(仅限于一个圆)

实现思路如下:

1.在要遮罩的页面上添加一层全透明元素a,覆盖整个页面

2.再在a上面画圆b,background设置全透明,用box-shadow设置圆的边框半透明,阴影宽度设置的大一些(>3000px),b的z-index要大于a的,其余样式自定义。

同样用边框宽度采用类似方式也可实现;

在网上看到有用mask、outline、mix-blend-mode(混合模式)等方式实现的,但是考虑到浏览器兼容性,还是采用了上边的方式。

发布了8 篇原创文章 · 获赞 0 · 访问量 1338

猜你喜欢

转载自blog.csdn.net/xiaobaige6084/article/details/104677393
今日推荐