网奇CMS - 成熟易用的.NET网站管理系统
旧版官网 | 客服论坛 | 彩虹服务 | 加入收藏 | TEL:400-600-2788

网页图片遮罩效果原理

利用个border偌大的半透明边框属性(demo中边框宽度200像素),边框颜色为rgba黑色半透明,然后50%圆角。再用用定位把它覆盖在图片上面。

利用个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;
}

就这么简单....

0 顶一下 打印 阅读:
CSS教程中最有帮助的文章