如何为标题 CSS 添加部分边框？ [复制]

【问题标题】：How to add a partial border to header title CSS? [duplicate]如何为标题 CSS 添加部分边框？ [复制]
【发布时间】：2021-09-22 00:43:36
【问题描述】：

是否可以在 CSS 中使用这样的边框？

CSS Border

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： html css border

【解决方案1】：

伪类可能有更聪明的方法。但这里有一个简单的解决方案，它为每个“边框”使用几个定位的 div。

.container { 
  position: relative; 
  z-index: 2;
  width: 400px;
  height: 100px;
}

.box { 
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
}

.box.border {
  z-index: -1;
  width: 33%;
  height: 100%;      
}

.box.left {
  background: yellow;
  left: -10px;
  bottom: -10px;
}

.box.right {
  background: blue;
  right: -10px;
  top: -10px;
}

<div class='container'>
 <div class='box'></div>
 <div class='box border left'></div>
 <div class='box border right'></div>
</div>

【讨论】：