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

内容需要能够在凹面区域滚动，并且不被遮挡。具体而言，我正试图创建以下内容：

---

我不知道有什么方法可以使用边框来实现这一点，但您可以尝试在CSS3中使用

：：before

与

边框半径相结合，如本演示所示


#标题{
位置：固定；
z指数：1；
高度：80px；
背景：#f00；
溢出：隐藏；
排名：0；
左：0；
右：0；
z指数：2；
}
#标题：：之前{
内容：“；
位置：绝对位置；
背景：#fff；
底部：-22px；
高度：30px；
左：-50px；
右：-50px；
边界半径：50%；
}
#内容{
填充：20px；
位置：绝对位置；
z指数：1；
顶部：80px；
左：0；
宽度：460px；
}
标题
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
我测试了一种使用伪元素的
边框顶部
来实现这一点的方法（这里，：after）：

这不完美，渲染效果不好。

使用Javascript/画布是一种选择吗？还是只有CSS？
不确定您需要什么，这是您需要的吗


html

您应该看看如何使用CSS剪辑/屏蔽技术

具体而言，您可以通过一些SVG定义指定要实现的边界：

<svg>
  <defs>
    <mask id="masking">
      <!-- white area means: visible -->
      <rect width="300" height="300" fill="white"/>

      <!-- black area means: hidden -->
      <ellipse rx="150" ry="10" cx="150" cy="300" fill="black" />
    </mask>
  </defs>
</svg>

我创建了一个小示例，在下面的提琴中演示了这一点。这仍然需要进行一些调整，以便在涉及不同维度时更加灵活，但它应该为您指明方向：

更新：下面的提琴也显示了滚动行为-我是否正确理解了您的意图

第二次更新：现在了解内容应该放在div内部，这反映在本演示中：
对于透明背景，可以使用框阴影：


说明：

这种技术的要点是使用一个带有方框阴影和透明背景的伪元素来看穿它。伪元素的位置非常合适，并且比容器的宽度大得多，以便（借助边界半径）为div的底部提供平滑的插入曲线

简单来说：div的背景是伪元素的框阴影。

z索引值允许在阴影上显示div的内容

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

通过形状后面的内容扫描，您可以看到此



html，正文{
身高：100%；
保证金：0；
填充：0；
背景：url（'http://lorempixel.com/output/people-q-c-640-480-1.jpg');
背景尺寸：封面；
}
div{
背景：无；
身高：50%；
位置：相对位置；
溢出：隐藏；
z指数：1；
}
部门：之后{
内容：''；
位置：绝对位置；
左-600%；
宽度：1300%；
垫底：1300%；
最高：80%；
背景：无；
边界半径：50%；
盒影：0px 0px 0px 9999px青色；
z指数：-1；
}
content
您可以使用PNG图像吗？我认为SVG图像加边框图像可能是唯一的选择。我希望有一个完全基于代码的解决方案。相关：我更喜欢非JS解决方案，但作为最后手段，我可能不得不求助于它。好吧，你可以使用SVG并用JS改变它的颜色……当我在div中添加多个
Test
时，内容似乎不会滚动，这是OP请求的一部分。或者只是我的浏览器没有滚动，我使用的是win8 chrome。在IE或FF中似乎不起作用。尽管如此，我还是在视觉解决方案中获得了一些分数。@Dpeif如果公平的话，我已经修改了我的答案来反映这一点。我只是在JSFIDLE中做了同样的事情。我知道唯一的解决办法。它无法滚动，因为他固定了示例的高度。请随意移除它并进行测试。我根据你的小提琴做了一些调整，使形状看起来正确。但是，如果我将内容放在div后面，当它向后滚动时，它将被white：：before元素遮挡。请看这里：不完全是，需要在形状后面滚动文本内容。div后面的滚动在这里工作得很好，但我没有看到蓝色区域底部的曲线。非常接近。我正在尝试将内容放入形状中。我最好的尝试是在曲线上方创建另一个div，它提供了相同的视觉效果，尽管有更多的标记：太棒了！这似乎是最干净的解决方案。我喜欢这种解决方案，但必须指出的是，“形状内部”（老实说，形状上方）的内容存在限制。也无法将形状内的内容剪裁到凹面底线；那么它就会溢出。@PeterSorowka我不明白你的确切意思。请解释一下？@WebTiki我的意思是如果你在形状中放入更多内容会发生什么。（）这不会剪裁到曲线。但我明白了，这可能不是一个要求。@PeterSorowka这是因为形状有一个指定的高度，如果你移除它
 <div class="Fixed1"></div>
 <div class="scroll1">
 <p>DEMO CONTENT</p>
 </div>

.Fixed1 {
    color: #666;
    height: 200px;
    width: 100%;
    background-color: #06C;
    position: fixed;
    margin-top:40px;
}
.scroll1 {
    color: #333;
    height: 1000px;
    width: 720px;
    margin-right: auto;
    margin-left: auto;
    padding-left:50px;
    margin-top:110px;
    background-color: #CCC;
}

<svg>
  <defs>
    <mask id="masking">
      <!-- white area means: visible -->
      <rect width="300" height="300" fill="white"/>

      <!-- black area means: hidden -->
      <ellipse rx="150" ry="10" cx="150" cy="300" fill="black" />
    </mask>
  </defs>
</svg>

#your-div {

    mask: url('#masking');
}