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

Question

内容需要能够在其后面的凹区滚动且不被遮挡。具体来说，我正在尝试创建这个：

Answer 1

对于透明背景，您可以使用 box-shadows ：

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;
}

<div>content</div>

Answer 2

我不知道有什么方法可以用边框来做到这一点，但您可以尝试在 CSS3 中使用 ::before 并结合 border-radius，如本演示所示。

#header {
    position: fixed;
    z-index: 1;
    height: 80px;
    background: #f00;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
#header::before {
    content: "";
    position: absolute;
    background: #fff;
    bottom: -22px;
    height: 30px;    
    left: -50px;
    right: -50px;
    border-radius: 50%;
}
#content {
    padding: 20px;
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 0;
    width: 460px;
}

<div id="header">Header</div>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 3

您应该了解一下针对您的目的使用 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>

并在 CSS 中使用以下方式引用此掩码：

#your-div {

    mask: url('#masking');
}

我创建了一个小例子，在下面的小提琴中演示了这一点。这仍然需要稍作调整，以便在涉及不同维度时更加灵活，但它应该为您指明方向：http://jsfiddle.net/m8fo5zbk/

更新：跟随小提琴也显示滚动行为http://jsfiddle.net/m8fo5zbk/2/ - 我是否正确理解您的意图？

第二次更新：现在明白内容应该放在 inside 的 div 中，反映在这个演示中：http://jsfiddle.net/m8fo5zbk/3/

Answer 4

我测试了一种使用伪元素的border-top 实现这一目标的方法（此处为：之后）：http://jsfiddle.net/z6eqvnxw/

.test {
    width: 300px;
    height: 300px;
    background: blue;
    position: relative;

}
.test:after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 25px;
    border-top: blue 10px solid;
    bottom: -23px;
    left: 0;
    border-radius: 40%;
}

这并不完美，渲染效果不佳。

是否可以选择使用 Javascript/Canvas？还是只有 CSS？

Answer 5

不确定您需要什么，这是您需要的吗？

Quick Demo

html

 <div class="Fixed1"></div>
 <div class="scroll1">
 <p>DEMO CONTENT</p>
 </div>

CSS

.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;
}