我正在尝试尝试使用border-image速记属性制作这样的自定义css边框,但失败了,有没有办法做部分边框?也许有一种更好的方法可以实现我的目标?我总是可以只插入此图像,但是一旦执行此操作似乎就无法调整大小。
答案 0 :(得分:3)
我们还可以通过如下方式直接将content
放在container
内来实现此目的。
在这里,我们使用边距定位了content
,我们也可以通过绝对定位内容来做到这一点。
.container {
border: 5px solid #000;
border-bottom: 0;
height: 10px;
margin-top: 15px;
}
.content {
background: #fff;
text-align: center;
border-left: 5px solid #000;
border-right: 5px solid #000;
height: 25px;
line-height: 25px;
width: 150px;
margin: -15px auto 0; /* height 25px + 5px border = 30/2 = 15 */
}
<div class="container">
<div class="content">Header</div>
</div>
答案 1 :(得分:1)
您可以使用display:flex
来包装border
并将其与wrap
一起“播放”
.wrap{
display:flex;
width:100%;
}
.wrap div{
width:calc(100vw / 3);
}
.header{
text-align: center;
border-right: 5px solid black;
border-left: 5px solid black;
}
.border{
margin-top: 5px;
height:8px;
border-top: 5px solid black;
}
.b-left{
border-left: 5px solid black;
}
.b-right{
border-right: 5px solid black;
}
<div class="wrap">
<div class="border b-left"></div>
<div class="header">Header</div>
<div class="border b-right"></div>
</div>
答案 2 :(得分:1)
这是一种响应式解决方案,具有更少的代码和透明的内容:
.container {
text-align: center;
overflow: hidden;
border:5px solid;
border-image:linear-gradient(to bottom,transparent 10px,#000 10px,#000 100%) 4;
height:50px;
margin:5px;
}
.top {
display: inline-block;
position: relative;
padding: 0 10px;
}
.top::before,
.top::after {
content: "";
position: absolute;
top: calc(50% - 8px);
width: 100vw;
height: 15px;
padding: 5px 0;
box-sizing: border-box;
background: #000 content-box;
}
.top::before {
right: 100%;
border-right: 5px solid;
}
.top::after {
left: 100%;
border-left: 5px solid;
}
body {
background:pink;
}
<div class="container">
<div class="top">Hello</div>
</div>
<div class="container">
<div class="top">More Hello</div>
</div>
<div class="container">
<div class="top">H</div>
</div>