如何在CSS中创建凹底边框？

内容需要能够在凹陷区域中滚动后面而不会被遮挡.具体来说,我正在尝试创建这个：

最佳答案

对于透明背景,您可以使用框阴影：

DEMO

说明：

这种技术的关键是使用具有盒阴影和透明背景的伪元素来透视它.伪元素被绝对定位并且具有比容器大得多的宽度,以便(借助于边界半径)给div的底部提供平滑的插入曲线.

简单来说：div的背景是伪元素的Box-shadow.

z-index值允许div的内容在阴影上显示.

******编辑*************************

随着形状背后的内容肆虐,你可以看到这个DEMO

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
div {
    background:none;
    height:50%;
    position:relative;
    overflow:hidden;
    z-index:1;
}
div:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    Box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}