我正在尝试使用 border-image 速记属性尝试制作这样的自定义 css 边框,但惨遭失败。有没有办法制作部分边框?也许有更好的方法来实现我想要做的事情?我总是可以只插入这张图片,但一旦你这样做,它似乎不会很好地调整大小。
最佳答案
我们也可以通过直接将 content
放置在 container
中来实现这一点,如下所示。
这里我们使用边距定位了内容
,我们也可以通过绝对定位内容来做到这一点。
.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>
关于css - 如何使用 border-image 制作自定义 CSS 边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54176294/