如何在CSS中創建凹底邊框？

Question

內容需要能夠在凹陷區域中滾動后面而不會被遮擋。 具體來說，我正在嘗試創建這個：

Answer 1

對於透明背景，您可以使用框陰影：

DEMO

說明：

這種技術的關鍵是使用具有盒陰影和透明背景的偽元素來透視它。 偽元素被絕對定位並且具有比容器大得多的寬度，以便（借助於邊界半徑）給div的底部提供平滑的插入曲線。

簡單來說： div的背景是偽元素的box-shadow。

z-index值允許div的內容在陰影上顯示。

******編輯*************************

隨着內容在形狀背后肆虐，你可以看到這個DEMO

---

 html,body{ height:100%; margin:0; padding:0; background: url('http://lorempixel.com/output/people-qc-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/ - 我是否正確理解你的意圖？

第二次更新：現在明白內容應該放在div 里面 ，反映在這個演示中： http ： //jsfiddle.net/m8fo5zbk/3/

Answer 4

我測試了一種使用偽元素的border-top實現的方法（這里，：after）： 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

不確定你需要什么，這是你需要的嗎？

快速演示

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