您现在的位置是：网站首页> 编程资料编程资料

巧用CSS3 border实现图片遮罩效果代码_css3_CSS_网页制作_

2021-09-07 1048人已围观

简介巧用CSS3 border实现图片遮罩效果代码，需要的朋友可以参考下

复制代码

代码如下:

无标题文档

其实现原理是利用个border偌大的半透明边框属性（demo中边框宽度200像素），边框颜色为rgba黑色半透明，然后50%圆角。再用用定位把它覆盖在图片上面。
主要核心代码:

复制代码

代码如下:

.test_cover {
width: 40px;
height: 40px;
border: 200px solid rgba(0, 0, 0, .35);
border-radius: 50%;
position: absolute;
left: -115px;
top: -165px;
}

然后外面再用个父容器把它溢出隐藏掉就可以了

复制代码

代码如下:

.test_outer {
display: block;
width: 200px;
height: 200px;
margin: 1em auto;
position: relative;
overflow: hidden;
}

就这么简单....