如何用CSS实现这种类型的边框

Question

在示例图像中，您可以看到“日期”和“名称”前后的粗黑线条。我正试图用CSS来实现这一点。搜索但不能想到搜索时要调用它。

.sort-btn-holder{ 
 
    display: inline-block; 
 
} 
 
.sort-title{ 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="sort-btns pull-right"> 
 

 
    <div class="sort-btn-holder"> 
 
    <span class="sort-title">Date</span> 
 

 
    <button id="desc" class="btn btn-primary" type="button"> 
 
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px"> 
 
    </button> 
 

 
    <button id="asc" class="btn btn-primary" type="button"> 
 
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px"> 
 
    </button> 
 
    </div> 
 

 
    <div class="sort-btn-holder"> 
 
    <span class="sort-title">Name</span> 
 

 
    <button id="older" class="btn btn-primary" type="button"> 
 
     <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px"> 
 
    </button> 
 

 
    <button id="newer" class="btn btn-primary" type="button"> 
 
     <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px"> 
 
    </button> 
 
    </div> 
 

 
</div>

我想我应该用：或前：后。 这里是一个链接到HTML和CSS在小提琴：https://jsfiddle.net/dntbqykk/

Answer 1

下面是使用绝对定位和:after伪元素来保存标签（例如“Date”）的一种方法。

这段代码演示了一个概念验证，但仍然有一些细节需要弄清楚，以确定您可能想要融入到网站的确切样式。

.sort-btn-holder { 
 
    border: 1px dotted blue; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-top: 25px; 
 
} 
 
.btn.btn-primary { 
 
    border: 1px dotted red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.sort-title { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 10px; 
 
    left: 25px; 
 
    right: 25px; 
 
    height: 15px; 
 
    border: 4px solid blue; 
 
    border-width: 4px 4px 0 4px; 
 
} 
 
.sort-title:after { 
 
    content: 'Date'; 
 
    margin: 0 5px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: -13px; 
 
    background-color: white; 
 
    text-align: center; 
 
}

<div class="sort-btn-holder"> 
 
    <span class="sort-title"></span> 
 

 
    <button id="desc" class="btn btn-primary" type="button"> 
 
    <img src="http://placehold.it/24x24" width="24px" height="24px"> 
 
    </button> 
 
    <button id="asc" class="btn btn-primary" type="button"> 
 
    <img src="http://placehold.it/24x24" width="24px" height="24px"> 
 
    </button> 
 
</div>

Answer 2

不是CSS解决方案，但你尝试使用fieldset标签？ 我知道这不是完美的解决方案，但它会给你类似的效果，你可以调整边框样式。之后，您可以对齐这些内部框。这可能是最简单的方法，尽管我相信CSS能够实现这一点，但使用更多的代码。

Answer 3

下面是选择与:before和:after伪元素和box-shadow

.sort-btn-holder{ 
 
    display: inline-block; 
 
} 
 

 
.sort-title{ 
 
    display: block; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.sort-title:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 15%; 
 
    width: 30px; 
 
    top: 60%; 
 
    height: 13px; 
 
    box-shadow: 5px -5px 0px 0px #000000; 
 
} 
 

 
.sort-title:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 15%; 
 
    width: 30px; 
 
    top: 60%; 
 
    height: 13px; 
 
    box-shadow: -5px -5px 0px 0px #000000; 
 
} 
 

 
button { 
 
    height: 40px; 
 
    width: 65px; 
 
    border: none; 
 
    background: #29477F; 
 
}

<div class="sort-btns pull-right"> 
 

 
    <div class="sort-btn-holder"> 
 
    <span class="sort-title">Date</span> 
 

 
    <button id="desc" class="btn btn-primary" type="button"> 
 
    <img src="http://williamcunningham.me/abc/img/sortza.jpg" width="24px" height="24px"> 
 
    </button> 
 

 
    <button id="asc" class="btn btn-primary" type="button"> 
 
    <img src="http://williamcunningham.me/abc/img/sortaz.jpg" width="24px" height="24px"> 
 
    </button> 
 
    </div> 
 

 
    <div class="sort-btn-holder"> 
 
    <span class="sort-title">Name</span> 
 

 
    <button id="older" class="btn btn-primary" type="button"> 
 
     <img src="http://williamcunningham.me/abc/img/sort90.jpg" width="24px" height="24px"> 
 
    </button> 
 

 
    <button id="newer" class="btn btn-primary" type="button"> 
 
     <img src="http://williamcunningham.me/abc/img/sort09.jpg" width="24px" height="24px"> 
 
    </button> 
 
    </div> 
 

 
</div>