开发中 遇到个css的问题：怎么把头像（一个圆）放在信息框（一个矩形）里，让间隙部分透明，显示外层div的背景，起到更佳的视觉效果

像这样子，是不是感觉不用图片很难做出来？仔细看看下面的代码，透明白色部分我是用边框，镂空部分是内容，这样表现的像圆是被镂出来的，

其实是假象。

section.m-header-info >div.infoWrap section.infoContainer{

? ?
? ?width: 1062px;
? ?height: 150px;
? ?/* background-color: rgba(255,255,255,.72); */
? ?position: absolute;
? ?top:0;
? ?right: 0;
? ?bottom: 0;
? ?margin: auto 0;?
? ?overflow: hidden;
? ?*background-color: rgba(255,255,255,.64); /*ie7及ie7以下浏览器*/


}?


?section.m-header-info >div.infoWrap section.infoContainer:before{
? ?
? ? content: "";
? ? display: block;
? ? position: absolute;
? ? left:50%;
? ? top: 50%;
? ? margin-left: -1676px;
? ? margin-top: -1108px;
? ? border-radius: 50%;?
? ? width: 216px;
? ? height: 216px;
? ? border: 1000px solid rgba(255,255,255,.64);

?}

cs