Html 顶部和底部带有部分边框的按钮

大家好， 我想在我的代码中插入一个

，该代码在

边框顶部

和

边框底部

中有间隙。我已经看到一些地方，它可以删除一个部分与它，但它并不完全是我所寻找的。你对如何得到像上面提到的图片一样的东西有什么想法吗

提前感谢您的回复

编辑：

---

我添加了更多信息：最好的是按钮的背景是透明的，

边框大小是可定制的。
我为您创建了一个JSFIDLE：

HTML:

我已经为您创建了一个JSFIDLE：

HTML:

一个简单的方法是使用定制的图像作为按钮的背景，尽管它不能在不同的屏幕大小上很好地缩放

另一种方法是在下方有一个普通边框的div，然后在其上方有一个较小的按钮，具有相同的高度和白色边框，以便隐藏顶部和底部。
一种简单的方法是使用自定义图像作为按钮的背景，尽管它在不同的屏幕尺寸上不能很好地缩放

另一种方法是在下方有一个带普通边框的div，然后在其上方有一个较小的按钮，具有相同的高度和白色边框，以便隐藏顶部和底部。
使用伪元素


.brd{
字体大小：30px；
填充：4px20px；
位置：相对位置；
边界：无；
背景色：白色；
}
.布莱德：以前，
.布莱德：之后{
内容：''；
位置：绝对位置；
边框：1px纯黑；
排名：0；
底部：0；
宽度：10px；
}
.布莱德：以前{
右边界：0；
左：0；
}
.布莱德：之后{
左边框：0；
右：0；
}
标题
标题
使用伪元素


.brd{
字体大小：30px；
填充：4px20px；
位置：相对位置；
边界：无；
背景色：白色；
}
.布莱德：以前，
.布莱德：之后{
内容：''；
位置：绝对位置；
边框：1px纯黑；
排名：0；
底部：0；
宽度：10px；
}
.布莱德：以前{
右边界：0；
左：0；
}
.布莱德：之后{
左边框：0；
右：0；
}
标题
标题

把你的文字写在这里


把你的文字写在这里
另一种可能的解决方案是使用梯度作为边界图像。请看下面的代码片段


.box{
显示：内联块；
保证金：自动；
填充：10px；
边框：3倍纯色透明；
-moz边框图像：-moz线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
-webkit边框图像：-webkit线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
边界图像：线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
边界图像切片：1；
}
TITLE HERE
另一种可能的解决方案是使用渐变作为
边框图像
。请看下面的代码片段


.box{
显示：内联块；
保证金：自动；
填充：10px；
边框：3倍纯色透明；
-moz边框图像：-moz线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
-webkit边框图像：-webkit线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
边界图像：线性渐变（向右，#aaa 10%，#fff 10%，#fff 90%，#aaa 90%）；
边界图像切片：1；
}
标题在这里
谢谢你，伙计！这是一个很好的解决方案，但最好有一个透明的背景谢谢！这是一个很好的解决方案，但最好有一个透明的背景。我曾考虑过使用
svg
格式，但最好是纯文本css@LGSon那么，奥巴马的答案是最好的。不知道你可以这样使用伪元素。整洁的我曾考虑使用
svg
格式，但最好是纯svg格式css@LGSon那么，奥巴马的答案是最好的。不知道你可以这样使用伪元素。整洁的
<div class="back-with-border">
  <div class="front-no-border">
    Title Here
  </div>
</div>

.back-with-border{
  border:1px solid gray;
  width:200px;
  height:100px;
  position: relative;
}

.front-no-border{
  display:flex;
  justify-content:center;
  align-items:center;
 border:0px;
 background-color:white;
 position: absolute;
 width:110px;
 height:110px;
 top:-1px;
 left:45px
}

Check this [JSFiddle][1], hope this will solve your problem 



    body {
      background-color: white;
    }

    .parent {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      position: relative;
      background-color: white;
    }

    .child {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0px;
      background-color: white;
      position: absolute;
      width: 150px;
      height: 103px;
      top: -1px;
      left: 25px
    }