如何使按钮看起来好像有透明的边框/笔划？

Question

我有一个带边框的动态宽度/高度div。 Inside是一个绝对定位的按钮，位于底部，与父div的边界重叠。我想在重叠按钮之前让边框停止几个像素。一个要求是保持一切动态，如果按钮长度增加或框增长它不会打破风格。

这是我迄今为止所做的尝试：

＆＃13;

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  text-decoration: none;
}

h1 {
  margin-top: 0;
}

.box {
  border-bottom: 0;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 6px;
  background: #fff;
  right: 75%;
}

.box:after {
  right: 0;
  left: 75%;
}

＆＃13;

<div class="box">
  <h1>Some Header</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
  <a class="link" href="#">A Link</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用前后底部边框的弹性框。这样，当按钮增长时，边框将缩小：

＆＃13;

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  border-bottom: none;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.buttonWrapper {
  position: absolute;
  display: flex;
  bottom: 0;
  right: 0;
  left: 0;
  align-items: flex-end;
}

.buttonWrapper:before, .buttonWrapper:after {
  display: block;
  flex: 1;
  height: 6px;
  background: #fff;
  content: '';
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  margin: 0 5px;
  color: #fff;
  text-decoration: none;
  transform: translateY(50%);
  align-item: middle;
}

h1 {
  margin-top: 0;
}

＆＃13;

<div class="box">
  <h1>Some Header</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
  <div class="buttonWrapper">
    <a class="link" href="#">A very long Link</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用position属性创建假边框（一些hacky方法）

＆＃13;

＆＃13;

body {
  background-color: #ddd;
}

.wrapper {
  overflow: hidden;
  width: 70%;
  height: 150px;
  padding-bottom: 10px;
}
.wrapper .block {
  border: 4px solid white;
  border-bottom: 0;
  position: relative;
  height: 100%;
}

.wrapper .button-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 20px;
}
.wrapper button {
  border: none;
  background-color: black;
  color: white;
  display: inline-block;
  height: 20px;
  position: relative;
  bottom: -8px; 
}

.wrapper button:after,
.wrapper button:before {
  content: '';
  position: absolute;
  top: 8px;
  width: 1000px;
  height: 4px;
  background-color: white;
}

.wrapper button:after {
  right: 120%;
}

.wrapper button:before {
  left: 120%;
}

＆＃13;

<div class="wrapper">
  <div class="block">
    <div class="button-wrapper">
      <button>Text</button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

描述的

1. 将整体包装器设为绝对包装，使用overflow: hidden隐藏太长的底部边框。将底部衬垫应用于按钮，以便在向下移动时不隐藏。
2. 在按钮周围放置一些包装，并将其放在父母的底部。
3. 按钮包装器text-align: center，按钮位于动态内容的中心位置。
4. 将:before和:after与left/right: 1XX%一起使用，将其移出按钮。
5. 伪元素宽度应该大于父包装宽度（wrapper-max-ever-width / 2）

Answer 3

请尝试以下方法：

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: url(https://static.pexels.com/photos/415949/pexels-photo-415949.jpeg) no-repeat top center/cover;
  font: normal 100% arial, sans-serif;
  color: #fff;
}

.box {
  max-width: 500px;
  margin: 0 auto;
  border: 6px solid #fff;
  text-align: center;
  position: relative;
  padding: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.link_wrap {
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 0;
  display: flex;
  align-items:center;
  transform: translateY(50%);
}

.link_wrap:before, .link_wrap:after {
  content: '';
  display: inline-block;
  flex: 1;
  height: 6px;
  background-color: #fff;
}

.link_wrap:before {
  margin-right: 10px;
}

.link_wrap:after {
  margin-left: 10px;
}

.link {
  display: inline-block;
  background: #000;
  padding: 10px 25px;
  top: 100%;
  left: 50%;
  color: #fff;
  text-decoration: none;
}

h1 {
  margin-top: 0;
}

.box {
  border-bottom: 0;
}

<div class="box">
	<h1>Some Header</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
	<div class="link_wrap"><a class="link" href="#">A Link</a></div>
</div>

Answer 4

愿这对你有所帮助！ 点击run code snippet以显示示例

.header { 
  height: 300px; width: 100%; background: yellow; 
  display: flex; align-items: center; justify-content: center;
}
.scrapbook-texts { margin: 0 20px; padding: 20px 0;}
.scrapbook { 
  border: solid white;
  border-width: 5px 5px 0 5px;
  position: relative;
}

.scrapbook-cta {
  position: absolute;
  bottom: 0;
  text-align: center;
  display: flex;
  width: 100%;
}
.scrapbook-cta::after,
.scrapbook-cta::before {
  border-bottom: 5px solid white;
  width: 100%;
  display: block;
  content: "";
  flex: 1 1 auto;
}
.scrapbook-cta::before {
}

.scrapbook-cta button {
  margin: 0 20px;
  flex: 1 0 auto;
  appearance: none;
  width: 50px;
  height: 20px;
  border: none;
  background: black;
  color: white;
}

<header class="header">
  <div class="scrapbook">
    
    <div class="scrapbook-texts">
      <h1>Some Header</h1>
      <h2>Lorem ipsum...</h2>
    </div>
    
    <div class="scrapbook-cta">
      <button>Link</button>
    </div>
  </div>
</header>