html - css 方形边框，边框底部有间隙

Question

我正在尝试复制这个模型设计。

设计:

当前:

有没有办法确保“全部购买”忽略溢出:隐藏，但之前和之后服从溢出:隐藏？

或者我可以尝试使用另一种方法来实现它吗？

HTML

<div id="outer">
  <div id="opaq">
  <div id="inner">
    <h1>Performance Parts</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet. Nunc gravida urna urna. Vestibulum vitae lectus leo. Etiam fermentum nunc vel nulla tincidunt, sit amet molestie lectus pulvinar.</p>
    <div id="shop">Shop all</div>
  </div>
  </div>  
</div>

CSS

#outer{
  max-width:500px;
  text-align:center;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");

}
#opaq{
  background-color: rgba(48, 44, 44, 0.7);
  padding:5px;
}
#inner{
  border:1px solid red;
  margin:10px;
  color:white;
  border-bottom:none;
  overflow:hidden;
}

#shop{
  position:relative;
  top:8px;
  display: inline-block;
}
#shop:after{
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  top: 9px;
  width: 600px;
  left: 100%;
  margin-left: 15px;
}
#shop:before{
  content: "";
  position: absolute;
  border-bottom: 1px solid white;
  top: 9px;
  width: 600px;
  right: 100%;
  margin-right: 15px;
}

Answer 1

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.wrapper {
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(http://beerhold.it/400/300);
  background-repeat: no-repeat;
  background-size: cover;
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
fieldset {
  width: 90%;
  height: 90%;
  margin-top: .7em;
  transform: rotate3d(0, 0, 1, 180deg);
  border: 3px solid rgba(255, 255, 255, .4);
}
legend {
  font-size: 1.4em;
  font-weight: 700;
}
legend span,
fieldset .text {
  display: block;
  transform: rotate3d(0, 0, 1, 180deg);
  color: white;
  text-shadow: 0 0 4px black;
  padding: 0 1em;
}
legend span {
  color: yellow;
}
fieldset .text {
  height: 100%;
}
fieldset .text h1 {
  padding: .3em 0;
  text-align: center;
}
fieldset .text p {
  line-height: 1;
}

<div class="wrapper">
  <fieldset>
    <legend align="center"><span>SHOP ALL</span>
    </legend>
    <div class="text">
      <h1>Lorem ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a justo nisl. Phasellus consequat tincidunt elit, sed interdum nibh blandit ut. Nunc augue erat, rutrum ac vehicula nec, pulvinar in eros.
      </p>
    </div>
  </fieldset>
</div>