html 透明的圆形,用CSS3剪出透明圆圈

可以使用框阴影仅使用CSS制作剪切圆。以下演示具有固定的高度/宽度，但可以使用百分比大小获得相同的输出，从而使其响应：

DEMO

输出：

body{

background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);

background-size:cover;

}

div{

width:600px; height:350px;

overflow:hidden;

position:relative;

margin:0 auto;

border-top-left-radius:20px;

border-top-right-radius:20px;

z-index:1;

}

div:before,div:after{

content:'';

position:absolute;

}

div:before{

top:-50px; left:225px;

width:150px; height:150px;

border-radius:50%;

box-shadow: 0px 0px 0px 9999px #000;

z-index:-1;

}

div:after{

top:0;left:0;

width:100%; height:100%;

box-shadow: inset 0px -300px 600px -300px #fff;

}