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

Question

我很困惑，因为必须让它在CSS中工作只有一个div，其中边框只能在宽度的一半上看到。

边框样式很简单1px solid #000;

但是，我希望div边框的顶部不会在任何地方都可见（在div的宽度上为100％）， 而只是div宽度的前50％。

我无法在任何地方得到这样的例子，它需要以百分比形式出现，所以常用的技巧包（下半部分的图像，......）。

Answer 1

这会有效吗？

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

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

<强>结果：

<强>段

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>小提琴：

http://jsfiddle.net/vL1qojj8/

Answer 3

让我们告诉你我如何编辑狮子座的代码，将半边框放在中间的左边。

试试这个：

html代码

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

这些是用于放置半边框的代码，谢谢leo，

Answer 4

您可以使用 CSS 渐变边框

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

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

    

Answer 5

我喜欢海德拉巴

***

.div_1 {
    width: 50px;
    border-bottom: 2px solid black;
}
.div_2 {
   width: max-content;
   margin-bottom: 10px;
}

<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>