Html
    Css
    Js

    
                        
.crop-box,.preview-box {
	display:inline-block;
	vertical-align:top;
}
.crop,.preview {
	position:relative;
	overflow:hidden;
}
.crop-area,.preview {
	width:80px;
	height:80px;
}
.crop-area {
	position:absolute;
	left:88px;
	top:56px;
	outline:256px solid #000;
	outline:256px solid rgba(0,0,0,.5);
	background:url(about:blank);
	background:linear-gradient(to top,transparent,transparent);
	filter:alpha(opacity=50);
	cursor:move;
}
:root .crop-area {
	filter:none;
}
.crop img,.preview img {
	display:block;
	width:256px;
	height:192px;
}
.preview img {
	position:absolute;
	left:-88px;
	top:-56px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

镂空效果与outline

0