CSS - 只有一半边框可见的边框

Question

我很困惑,因为必须使它在CSS中工作只有一个div,其中边框只能在其宽度的一半上可见.

边框风格很简单 1px solid #000;

但是,我希望div边框的顶部不会在任何地方都可见(在div宽度上100%),而只是在宽度的前50%div.

我无法在任何地方得到这样的例子,它需要百分比,所以通常的技巧包(下半年的图像,......).

Answer 1

您可以使用 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>

    

Answer 2

这会工作:

#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>

    

Answer 3

如果您根本不想弄乱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>

结果:

片段

    .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;
      background-color:white;
      position: absolute;
      right:0;
      top:-1px;
    }

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

小提琴:

http://jsfiddle.net/vL1qojj8/