里面有CSS边框样式

Question

我想创建一个如图所示的边框。我尝试了所有的样式插入，开始，脊和凹槽，但我无法得到预期的结果。 有没有办法弯曲边界向内到中间，然后回到顶部（希望你能理解问题）。

如果重复提问，请添加解决方案链接。

提前致谢。
我试过这个：

        div {  
              border-bottom: 1px ridge #B5B9BB;
              /*border-bottom: 1px inset #B5B9BB;
              border-bottom: 1px outset #B5B9BB;
              border-bottom: 1px groove #B5B9BB; */
            }

Answer 1

您可以使用outline：

.bordered {
    border-bottom: 1px solid grey;
    background: aliceblue;
    outline: 5px solid aliceblue;
}

<div class="bordered">Available Apps</div>

Demo

Answer 2

似乎为什么不在文本上使用边框？

div {
  background: lightgrey;
  padding: 0.5em;
}
p {
  border-bottom: 1px ridge #B5B9BB;
}

<div>
  <p>Available Apps</p>
</div>

Answer 3

如果可能的话，最好使用包裹元素;它比outline更灵活（支持border-radius，box-shadows等）

例如：

<div class="headline-area">
    <h2>Available Apps</h2>
</div> 

使用CSS：

.headline-area {
  background:#D4D9DC;
  padding:5px;
}  
.headline-area h2 {
  border-bottom:1px solid #B5B9BB;
}

Answer 4

每当我遇到你的情况时，我都会使用box-shadow：

＆＃13;

＆＃13;

body {
    background:#D1D6D9;
    font-family:verdana;
}
div {
    border-bottom: 1px solid #B5B9BB;
    box-shadow:0 1px 1px rgba(255,255,255,.7);
    padding-bottom:5px;
}

＆＃13;

<div>Available Apps</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以随时尝试hr标记。然后，您可以在CSS中将其设置为所需的首选项。

HTML

New apps 
<hr>

Answer 6

试试这个但是你需要一个额外的Div才能这样做。

<强> HTML

<div class="outerDiv">
    COntent
    <div class="innerDiV">
    </div>
<div>

<强> CSS

.outerDiv{
    background-color: grey;
  height: 32px;
  text-align: center;
  padding: 16px;
  font-weight: bolder;
  font-size: 25px;
}
.innerDiV{
   margin: 0 auto;
  border: 1px solid black;
  width: 98%;
  margin-top: 10px;
}

Demo