顶部和底部带有部分边框的按钮 [英] Button with partial border on top and bottom

问题描述

大家好，我想在我的代码中插入一个< button> ，该代码在 border-top 和 border-bottom 中有空隙.我看到了一些示例，可以在其中删除零件，但这并不是我想要的.您对如何获得上述图片有想法吗?

Hi all, I would like to insert a <button> in my code that has a gap in border-top and border-bottom. I have seen some examples where it is possible to remove a part with it, but it's not exactly what I am looking for. Do you have an idea on how to get something like the above mentioned picture?

提前感谢您的答复！

我添加了更多信息:最好是按钮的背景是透明的，并且 border-size 是可自定义的.

I add more information: the best is that the background of the button is transparent and that the border-size is customisable.

推荐答案

使用伪元素

.brd {  
  font-size: 30px;
  padding: 4px 20px;
  position: relative;
  border: none;
  background-color: white;
}
.brd:before,
.brd:after {
  content: ' ';
  position: absolute;
  border: 1px solid black;
  top: 0;
  bottom: 0;
  width: 10px;
}
.brd:before {
  border-right: 0;
  left: 0;
}
.brd:after {
  border-left: 0;
  right: 0;
}

<span class="brd">Title</span>

<button class="brd">Title</button>

这篇关于顶部和底部带有部分边框的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！