如果你根本不想弄乱HTML，你可以只使用CSS，使用一个空的伪元素，当然，你仍然需要知道背景颜色（这里假设白色）：

<span class="half-a-border-on-top">Hello world!</span>

<style>
.half-a-border-on-top {
  border-top:1px solid black;
  position: relative;
}
.half-a-border-on-top:after {
  padding:0;margin:0;display:block;/* probably not really needed? */
  content: "";
  width:50%;
  height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
  background-color:white;
  position: absolute;
  right:0;
  top:-1px;
}
</style>

• • 结果：**

• • 片段**

x一个一个一个一个x一个一个二个x

• • 小提琴**

http://jsfiddle.net/vL1qojj8/
编辑2023：现在即使是Safari似乎也完全正确地支持linear-gradient，红了樱桃绿了吧唧的答案可能更优雅，不知道背景颜色也能工作。

这是否可行：

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top:-1px;
        left:1px;
        width:50%;
        height: 1px;
        background-color:#fff;
}

<div id="holder">
        <div id="mask"></div>
</div>

您可以使用CSS渐变边框

.half-a-border-on-top {
  border-top: 1px solid;
  border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}

<span class="half-a-border-on-top">Hello world!</span>

让我告诉你我是如何编辑狮子座的代码的，把一半的边界在左边的中心。
试试这个：
超文本标记语言代码
<div class="half-a-border-on-left">Hello world!</div>
CSS码

<style>
.half-a-border-on-left {
  border-left: 1px solid black;
  position: relative;
  height: 50px;
  background: red;
}
.half-a-border-on-left:after {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left:-1px;
  top: -10px;
}
.half-a-border-on-left:before {
  padding:0;
  margin:0;
  content: "";
  width: 1px;
  height: 10px;
  background-color:white;
  position: absolute;
  left: -1px;
  bottom: -5px;
}
</style>

这些是我用来写半个边框的代码谢谢里奥

我爱海得拉巴

***

x一个一个一个一个x一个一个二个x