Question

大家好，我想在我的代码中插入<button>，border-top和border-bottom之间存在差距。我已经看到一些examples可以用它删除一部分，但它并不是我想要的。您是否知道如何获得上述图片？

提前感谢您的回复！

修改

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

Answer 1

使用伪元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

另一种可能的解决方案是使用渐变为border-image。请看下面的代码段

.box{
  display:inline-block;
  margin: auto;
  padding: 10px;

  border: 3px solid transparent;

  -moz-border-image: -moz-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
  -webkit-border-image: -webkit-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
  border-image: linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
  border-image-slice: 1;
}

<div class="box" >TITLE HERE</div>

如果您希望顶部和底部边框部分恰好是X像素，则可以使用以下像素更改百分比：

border-image: linear-gradient(to right, #aaa 20px, #fff 20px, #fff calc(100% - 20px), #aaa calc(100% - 20px));

Answer 3

一种简单的方法是使用自定义图像作为按钮的背景，因为它不能在不同的屏幕尺寸上很好地缩放。

另一个想法是在下面有一个普通边框的div，然后在它上面有一个较小的按钮，高度和白色边框相同，以隐藏顶部和底部。

Answer 4

我为你创建了一个JSFiddle：enter link description here

HTML：

<div class="back-with-border">
  <div class="front-no-border">
    Title Here
  </div>
</div>

CSS：

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

Answer 5

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
    }
     <div class="parent">
       <div class="child">
         Write your text here
       </div>
     </div>




  [1]: https://jsfiddle.net/anshul24mehta/eocst0uv/3/

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

5 个答案: