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

Question

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

这是我到目前为止所尝试的：

 *, *: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%; } 

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

Answer 1

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

 *, *: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; } 

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

Answer 2

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

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

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

---

描述

1. 将整体包装器设为绝对包装，使用overflow: hidden来隐藏太长的底部边框。 将底部衬垫应用于按钮时，向下移动时不要隐藏。
2. 在按钮周围放置一些包装器并将其放在父级的底部。
3. 按钮包装器具有text-align: center用于按住按钮以保持动态内容的中心。
4. 使用:before和:after with 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>