CSS创意与视觉表现

图像剪裁

示意图像

代码

CSS代码：

.clip-img-x {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.clip-img {
    display: block;
}
.clip-shape {
    width: 150px; height: 150px;
    outline: 9999px solid rgba(0,0,0,.5);
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    cursor: move;
}

HTML代码：

<div class="clip-img-x">
    <div class="clip-shape"></div>
    <img src="./mm.jpg" class="clip-img">
</div>

实现的关键就是使用巨大尺寸的outline模拟镂空。