Skip to content

Instantly share code, notes, and snippets.

@mqxu
Created November 3, 2019 12:18
Show Gist options
  • Save mqxu/0981888f3b8f3df34231fe287a4f0ed4 to your computer and use it in GitHub Desktop.
Save mqxu/0981888f3b8f3df34231fe287a4f0ed4 to your computer and use it in GitHub Desktop.
【iCSS:图形】使用box-shadow裁剪图像
<div class="bruce flex-ct-x">
<div class="img-cliper">
<img src="https://yangzw.vip/static/codepen/gz.jpg">
<div class="mask">
<i></i>
</div>
</div>
</div>
.img-cliper {
overflow: hidden;
position: relative;
img {
width: 400px;
}
i {
position: absolute;
left: 50px;
top: 30px;
border-radius: 100%;
width: 100px;
height: 50px;
box-shadow: 0 0 0 9999px rgba(#000, .5);
}
.mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment