共计 402 个字符，预计需要花费 2 分钟才能阅读完成。
一、box-shadow
<div class="bruce flex-ct-x" data-title="应用 box-shadow 裁剪聚焦区域">
<div class="img-cliper">
<img src="https://static.yangzw.vip/codepen/gz.jpg">
<i></i>
</div>
</div><style>
.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 #a2fc4b;
opacity:.5;// 不应用 rgba 兼容局部安卓手机
}
}
</style>
援用文章
二、应用 border 进行四条边解决
正文完
